Quick Tip: Pure CSS Reflections
videos

Quick Tip: Pure CSS Reflections

on Jun 7th 2010 with 63 comments
Tutorial Details
  • Difficulty: Intermediate
  • Completion Time: 5 Minutes
Download Source Files
Demo View It Online

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!


Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?
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;
}
Sample

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Brayan

    Nice quick tip D:

    But the demo doesn’t work. (Access Denied) :(

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks. Just fixed. :)

  • Gavin

    wow, thats a really nice tip. And I guess as it just falls back to the image, those who dont see it, dont know its there?!

  • http://cardeo.ca cardeo

    This is sweet, thanks

  • http://lekevicius.com Jonas

    Nice tip.

    However, you can set border radius on firefox.

    Just use -moz-border-radius.

    • http://black-light-studio.com Ørjan

      Yes but on images it will not make round edges like chrome does
      it works nicely on boxes and such but it wont make the edges of the actual image rounded

  • http://ameliorersonfrancais.com Thierry Bélanger Clermont

    Simple and nice. Thank you for this tip.

  • Mohamed Zahran

    i’m following your tuts, specially CSS tutorials, thanks Jeffery.

  • Michael

    Very cool, but my thought/question is this: When CSS3 is finally fully supported, wont many of these cool features–which are all mostly inspired by Web UI design trends that are already many years old–be outdated? I think its ideal to be able to do all these wonderful things with CSS rather than with graphical images, but many of the CSS3 eye candy capabilities arent exactly cutting-edge anymore. By the time ALL the browser support them, well have moved on to other things (I assume).

    • Fynn

      So true :)

  • http://www.joshnichols.com Josh N.

    It’s not “pure CSS” if you have to use vender-specific code. Even if it is awesome, Webkit-specific code.

    • Batfan

      Agreed. Nice trick but, seems silly to implement in any real project being that it’s browser-specific.

      • http://karlroos.se Karl Roos

        There’s nothing wrong with progressive enhancement, since the reflection sort of works like shadows there’s still like a fallback for non-supporting browsers.

  • http://internubs.com internubs

    Could you show us how to use the reflection on videos? I assume it doesn’t work on flash videos.

  • http://www.tastybytes.net/ brian

    Great, as soon as reflections died out, you post this… here they come again >_<

  • http://www.tastybytes.net/ brian

    And thank you for posting the code below the video, I would have been highly disappointed if I sat through 4 minutes of boring for “-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(.7, transparent), to(white));”

    • http://net.tutsplus.com Jeffrey Way

      You seem like a nice guy.

      • http://www.tastybytes.net Brian

        No offense meant, I didn’t watch the video, but I find video tutorials frustrating because I’d prefer not watching someone type, go through menus etc. I always go to the text / html version over a video version.

        Thanks anyways

  • http://php.quicoto.com quicoto

    Didn’t know that one.

    I’m looking forward FF and IE9 to use this :P

  • http://ben-carlson.com/ Ben Carlson

    Ahhhhhhhhhhh! Why oh why cant all browsers jump on board with CSS3? Does it come down to them being lazy? Surely they can see the benefits! Awesome little demo.

    • Patrick

      @Ben,

      It really comes down to the fact that all Browser companies are on their own roads to HTML5 and CSS3. Some are reaally curved and rocky roads and some are more straight and paved. They will get there eventually, but that is why we are such great designers and developers because we find solutions to these problems.

  • http://www.creativebadger.co.uk Jen

    That is smart, thanks Jeff!

  • http://asturo.net Destiya Dian

    Never heard before..
    Exciting..
    But unfortunately just for webkit browser..

  • Al

    wow, just read the Image Flip snippet on css-tricks this morming, thought this looked similar

    you guys reading the books?

    Al

    • Al

      that should be the “same” books

  • http://www.esculent.co.uk Karl

    Too many bottom’s in the above code! :O (bottombottom)

    Remove one, then it works… :)

    In Christ, Karl.

  • http://www.codecrunchers.net Kevin Groenendaal

    Great quick tip there, Jeff!

  • amanuo

    I guess the reflection can’t have an overall transparency?

  • http://webstandard.kulando.de Webstandard-Blog

    Very nice screencast, but if you want some mor don’t miss CSS Box-Reflect (- Reflection without JavaScript and Photoshop)!

  • http://www.andrislinz.ch Andris

    Thanx a lot for the little demo. I didn’t know it’s so easy with CSS. I just don’t think reflections will become a trend again. Maybe in a few years. I think we’re all still fed up with that glossy shiny “Web-2.0″-style kinda thing. But it’s still good to know how it works.

  • http://www.ate5.com Jordan Walker

    The reflection of images is a great way to add some unique styling to interfaces and web designs.

    • James

      The reflection of images is a great way to add the same styling as everyone else to interfaces and web designs.

    • Liam

      Unique? You may want to look up that word in the dictionary.

  • Mike

    This reflection will work on text if you leave the div colorless you are reflecting.
    Thank you for the tutorial.

  • http://codendesign.blogspot.com nXqd

    It’s nice to know this but anyone know what aspect is this method ( pure CSS ) better than image-editing ?

    • http://www.kieru.com Rob

      Are you asking what makes this method superior to simply creating an image with the reflection already built in? If so well… here are my thoughts on that. Let’s suppose you have a site powered by a database, and that site is all about displaying images or a series of images (you know, a gallery, e-commerce site, whatever).

      Well, if you determine that a reflection is just ‘the thing’ to help make those images pop, you have two options. Option 1: Edit a reflection into every single image. Depending on the size of your database or how clever you are with things like PHP maybe this isn’t such a bad idea.

      Option 2 however – is to use a browser-dependent (which is bad) but gracefully degrading (which is good) CSS option that will display the reflection to customers viewing the site in a supported browser, but show just the normal old non-reflective image to everyone else.

      While I would not promote the reliance of -webkit or -moz placeholder CSS; this is a perfect example of introducing an ‘enhanced’ design option to some browsers while not breaking the site in others.

  • http://manakmichal.bluefile.cz manakmichal

    Very nice example but it’s sad that it works only in WebKit browsers and for crossbrowser solution you have to use another way how to display a reflection of the image.

  • John

    I am dating myself by saying this but, all this “only works in Webkit” stuff reminds me of the days when IE and Netscape had cool features that only worked in their proprietary browser.

    • http://www.davehanas.com Dave

      Yup, I second that.

  • Adrian

    Don’t use browser specific css.

    Just a note.

  • dailce

    Hmmm… doesn’t work in Firefox? I thought Firefox used webkit?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Nope. Firefox uses the moz prefix.

    • http://manakmichal.bluefile.cz manakmichal

      Firefox uses Gecko. Safari and Chrome use WebKit.

  • http://thnx thndxxxxxxxxxxx

    alert(“Said: Thanx X100000″)

  • http://www.cdgn.co.uk Vic

    I get it but what is the point of using stuff that is not yet supported in all of the browsers and most likely some of it will never get implemented…

  • http://www.antonagestam.se/ Anton Agestam

    I like it when the reflection starts at a lower opacity than a 100%, to achieve that you can utilize rgba(). This example will make the gradient start at 50%:

    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(255,255,255,0.5)));

  • iPad guy

    When I look at this in my iPad I can see a border around the full height of the reflection, even the transparent 70 percent. I haven’t tried this on the computer, but it’s still a problem right?

  • http://fvisticot@blogspot.com fvisticot

    Nice job !!!
    Unfortunately, it does not work when i try to apply the reflection on a video element !!

    My tests:
    -Chrome (6): OK
    -Safari (5): NOK
    -iPhone (3GS + OS4): NOK

    Any idea to have this video tag + reflection workin on the iPhone ?

  • James

    Dispite the fact I like this feature, it also scares me. This reminds me of the browser war between Microsoft and NetScape. For some reason, all the major browser builders start implementing their own features. As it so happens, many of these self made features will not be implemented in the final drafts for the W3C CSS3. So that makes one wonder why would the Safari team build such a feature?

    So here`s a paradox, while ever browser tries to get features for their respective browsers, most of these features will not be implemented, hence my fear. For it cannot be that IE or FF or even Opera will start implementing this.

    Getting back to that good ol` browser war, this is exactly what happened back then. Creating their own uber cool features thus ruining all the standards which were made available. If the webkit ( or Safari ) team keeps on creating this, we`ll all be worse of. Therefore I recommend everybody NOT to use these ( sometimes ) slick BUT browser specific features. For as long as we do not adopt it, we can force them either to drop it, or, if they are really pushing it, make the W3C adapt them in the final drafts, hence making sure all browsers have to implement it. Either way works for me, as long as there won`t be any browser specific features made available in the final drafts for CSS3.

    Just my opinion.

  • http://www.buitenaardig.nl/ Phil

    Only worked in my Chrome browser. No FF/IE

    • Chris sanders

      He said that in the tut.

  • Chris

    Awesome tut!

  • http://www.hebbedesign.com Johan

    Thank you very much for a awsome tut! :D

  • Alex W

    Not sure if anyone is still looking at this or not, but is there anyway to transform the reflection? To basically take the bottom of the reflection and squish it upwards?

    • http://uglydesign.freehostia.com ivan

      You may create the reflected content with -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
      It reflects the content to the X axis, in the element itself. Then do whatever you want to do with :-).
      See this: http://uglydesign.freehostia.com/design/water/water.html
      cheers
      ivan

  • Dasha

    What about “crossbrowsing”? Your demo does’t work in any browser…(What the use in this tutorial?)

  • http://www.1artmedia.com Valikonen

    Nice tutorial, but we must wait a long time for use the css 3 for all user!

    If you want to see more tutorial with menu and gallery visit: http://www.1artmedia.com ! bye

  • http://www.center-dm.ru/ Rulez-DM

    Author rekspekt, thank you that I was searching for so long …

  • http://www.agentur-wortwahl.de Wiyono

    in IE don’t work mas… kkikii…

  • Oswald

    Jeffrey,
    You might like some of the CSS3-based graphics code samples here:
    http://code.google.com/p/css3-graphics/
    Oswald

  • http://www.xhtml-lab.com Alok Jain

    Thanks for nice tip.

    With little more efforts, you can make it working on almost all browsers. Have a look at the following article for the same:
    http://www.xhtml-lab.com/css/create-reflection-effect-using-css3