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

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

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

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...