CSS Reflection

HTML
<h1 class="text-reflect"> CSS Reflection </h1>
CSS
* { box-sizing: border-box; } html, body { background: #fff; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } h1 { font-family: "Helvetica Neue", "Arial"; font-size: 3em; font-weight: 100; letter-spacing: 3px; color: #333; padding: 0; margin: 0; } .text-reflect, .text-reflect:before { display: block; margin: 0; padding: 0; } .text-reflect, .text-reflect:before, .text-reflect:after { position: relative; } .text-reflect:before { content: 'CSS Reflection'; top: 95px; transform: scale(1, -1); backface-visibility: visible; z-index: 1; } .text-reflect:after { content: ''; display: block; top: -10px; left: 0; width: 100%; height: 60px; background-image: linear-gradient(to bottom, rgba(255,255,255, .4) 0%, rgba(255, 255, 255, 1) 50%); z-index: 2; }
JAVASCRIPT
Expand for more options Login