O'Reilly

Image Reflections with CSS

By on  
CSS Image Reflection

Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images.  The minds behind WebKit have their own idea behind image reflection:  pure CSS.

The Webkit CSS

The -webkit-box-reflect property accepts a value in the following format:

-webkit-box-reflect: 
	<direction> /* above|below|left|right */ 	
	<offset>    /* pixel value start offset from image */
	<mask-box-image> /* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:

.reflectBelow	{ 
	-webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

An involved CSS value but well worth the work. The gradient is linear from left top to left bottom from transparent to white, showing half (0.5 the image).

WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. I find that frustrating but image reflection isn't a priority so I can't complain too much.  I am glad, however, that this is just one of several CSS enhancements given to us by the developers of WebKit!

Track.js Error Reporting

Upcoming Events

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

Discussion

  1. very good post thanks a lot

  2. Is it possible to have reflections for non-linear gradient as well? If so plz advice :). Thanks.

  3. Hopefully Firefox will catch on soon (and IE in a couple of years).

  4. It also works on any HTML element, not just images. Check it out: http://tomconlon.com/test/reflect.html

    I haven’t had time to play around with it too much, but I did notice it kind of choked when I wrapped an h1 and ul in a div with the reflectBelow class.

    Very cool, though.

  5. thats great but sad that it doesn’t work in other browsers.

  6. dj

    Is it possible to apply this on a html digital clock or date in a website? If so, how to code it?

  7. PM

    Thanks for sharing it.

    It is not working even in Firefox and obviously in IE.

    Thanks,

  8. Good post, bring on the day when browers are all on the same page with css & html interpretation

  9. This is really buggy in Chrome (20.0.1132.47 Mac). Had to opt for a JS version sadly.

  10. why do we use the old format for creating a ‘linear gradient color mask”, i checked the new format doesn’t work, why is that ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...