Quick Tip: Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip!

---

img {
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
  -webkit-border-radius: 3px;
   border-radius: 3px;
   border: 3px solid #666;
}