18 Incredible CSS3 Effects You Have Never Seen Before

18 Incredible CSS3 Effects You Have Never Seen Before

18 Incredible CSS3 Effects You Have Never Seen Before


CSS3 is hot these days and will soon be available in most modern browser. Just recently, I started to become aware to the present of CSS3 around the web. I can see some of the websites such as twitter and designer portfolios websites are using it. Also, I have started to implement it to my own project as well and I really love it! However, it will take a while to ditch CSS2 though.

I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It's incredible! I could never imagine to make animation using CSS few years ago. So, in this post, I will show you my findings of 18 Incredible CSS3 Effects that will blow you away!

Just make sure you view the following example with the latest version of Safari. Chrome and Firefox might not able to load some of those properly especially those involved animation. If you don't have safari, grab one, it worth it! Click here to jump to Apple Safari Homepage

  • 11 classic CSS Techniques Made Simple with CSS3 | Demo

    We've all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn't be limited to these old techniques when there's a new age coming. This new age includes the use of CSS3. In today's tutorial, it will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
  • Mock-Up Interface Using CSS3 Colour | Demo

    Here is the example for us to try out (warning large background image). It is based on a loose mock-up of a Mac OS X Leopard style interface.
  • Awesome CSS3 Lightbox Gallery - Demo

    In this tutorial tutorialzine is going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.
  • Awesome Overlays | Demo

    An example of using border-image and other new properties to make killer image overlays in Notable.
  • Coverflow Anyone | Demo

    it uses jQuery UI to create a actual coverflow widget, and jQuery UI's slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.
  • CSS3 Embed Font Face | Demo
  • CSS3 Polaroids | Demo

    In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures. Check out the demo and code snippets below.
  • CSS3 Text Shadow | Demo

    In this post, you will able to learn how to create letterpress, emboss and glowing effect with CSS3 just with 2-3 lines of CSS code! Awesome!
  • Drop in Modals | Demo

    For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
  • Matrix Animation with Webkit CSS3 | Demo

    This one is pretty cool. If you are a fan of Matrix, check out this example.
  • Polaroid Photo Viewer with CSS3 and jQuery | Demo

    A pretty incredible and well designed polaroid implemetation! By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).
  • Poster Circle | Demo

    This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.
  • Radioactive Buttons | Demo

    Create killer button focus effects using some very simple RGBa colors and -webkit-animations.
  • Sliding Vinyl - Demo

    We take an image of an album cover, some basic HTML, and a little fancy CSS3 that, on hover, slides out the pure-CSS vinyl record behind it.
  • Snowflakes | Demo

    I still remember old days, looking for javascript snippet to make snowflake effect on my own personal website. And guess what, you don't even need javascript now. It's all CSS! One thing though, not all the browsers are supporting it.
  • Super Slick jQuery Menu with CSS - Demo

    The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.
  • Super Awesome Buttons | Demo

    Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.
  • Text Shadow | Demo

    I guess this is the one that impress me a lot! It really looks like a flash implementation for me. Incredible? I give it 5 stars rating!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love


Tue, 16th February 2010
Awesome list! Have already seen a couple of them, but some are new to me. I might check them out later!

Thanks for including a couple of Marcofolio CSS3 articles - I hope you liked them ;) . Reply
Tue, 16th February 2010
I've seen literally all of those effects. Reply
Jordan Walker
Tue, 16th February 2010
Those are all very neat effects. Reply
Tue, 16th February 2010
Your screenshot of the CSS3 Embed Font Face Demo clearly shows Impact instead of a custom font. Did you even read that article before screenshotting it and listing it here? You'd notice that it isn't working. Reply
Tue, 16th February 2010
that's strange.. I've seen ALL of those allready. With such a strong title you need to have the content to back it up... and you don't. Reply
pouya saadeghi
Tue, 16th February 2010
some were good

tnx Reply
Wed, 17th February 2010
Wow great work!!! Reply
Thu, 25th February 2010
Cool. I like it. Reply
NBA Jerseys
Fri, 26th February 2010
Tue, 25th May 2010
Very nice collection of CSS3 stuff, but if you want some more, dont' miss <a href="http://webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial">Sliding Image Gallery</a> based on CSS Transition (Step-by-Step Tutorial ). Reply
Wed, 2nd June 2010
it's great, this shit will definitely help me revamp my site, cool man, never mind those trolls Reply
Fri, 29th October 2010
Thanks... great work!!! Reply
Fri, 11th February 2011
That is stunning what you can create just with CSS3. However, I still am hesitant to use it because of the glitches with IE browsers - yuck. Anyway... wow...
www.TaiChiGala.com Reply
Mon, 14th February 2011
very nice Reply
Tue, 22nd March 2011
wowww..nice...awesome...loved it.. Reply
Tue, 23rd August 2011
Great roundup, now we just got to get rid of IE and the world will be a lot more beautiful !

Thanks for sharing Reply
matt magi
Fri, 16th September 2011
these are great, might have to start attempting a few of these...time for a new portfolio...yes! Reply
Thu, 27th October 2011
Snowflakes is still javascript, just rotated and styled via css. Reply
Wed, 14th March 2012
Thanks and Awesome ! Reply
Sun, 30th December 2012
That's cool that we can take the credit loans and it opens new possibilities. Reply
Wed, 2nd January 2013
Your screenshot of the CSS3 Embed Font Face Demo clearly shows Impact instead of a custom font. Did you even read that article before screenshotting it and listing it here? You'd notice that it isn't working.

http://asrertebat.ir/ Reply
Mon, 11th March 2013
Sweet!! Reply
Hakan Bilgin
Fri, 8th November 2013
Here is another effect never seen before in a browser - Genie effect with Javascript and CSS:
http://vanguard-ide.com/genie Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!