We can do a lot of things with CSS like, create pretty effects, make models, build different shapes etc. Putting a perfect CSS in your application isn’t hard these days. There are thousands of effects and tutorials available on the internet and that’s too for free. Picking a right combination of ideal effects is really a tough task and most of them seem a bit outdated or old fashioned. We’ve gathered some amazing CSS3 effects that will help you give your website a modern look with great user experience. You are free to play with the code to generate some great results.
Table of Contents
28. 3D Text
Give your heading text a 3d look with cool fonts and amazing shadow effects.
27. Flat Icons
The pure CSS Iconex Flat Icon Set (4 icons), designed by Alireza Attari.
26. Color Spectrum
This is what you get by mixing colors with box-shadow. The color spectrum is a progression among 3 colors.
25. Metro UI
The Metro UI inspired by Windows 8 design, entirely created with CSS3. The icons are extracted from FontAwesome.
Recommended: 100+ Best Metro Style WordPress Themes
24. Elastic Stroke
This is elastic stroke of the text with beautiful color scheme and the effects are made with CSS and SVG.
23. Layered shapes
Beautiful colored plus layered shapes (entirely written in CSS), designed by Snhasani.
22. Spiral CSS
A cloudy spiral CSS animation that can be used as a loading icon.
21. Text Animation
Yoann created this amazing ticker effect with text animation. The toggling effect of second word looks pretty cool.
20. Flat Long Shadow
This is ultimate shadow mixin packed with fade variables, long shadows and angle variable.
19. CSS Creatures
The beautiful interactive icons entirely made with HTML and CSS.
18. 3d Flip Button
17. Transform Text with Shadow
This is CSS text shadow designed with advanced typography techniques using lettering.js.
16. CSS Rainbow
This is full circle rainbow with a simple hover effect.
15. Colorful Glitchy 404
14. UI Feedback
This is a bunch of feedback ideas to your buttons. This is just an inspiration to give your front end UI some more dynamism.
13. Horizontal Accordion
The Horizontal Accordion made with pure CSS. It includes elements (instead of images) and Genericons font for the social networking icons.
12. Circle illusion
A Circle illusion with Tusi motion, designed by Jaime Caballero. You can use it as a page loading bar/icon.
11. Seconds Counter
An elegant counter perfect for “coming soon” templates.
10. CSS Text-FX
It is created by adding dimmed light to the text, giving you patchy flashes.
9. CSS Menu
A modern mobile menu with CSS3 animations and transitions.
8. Budget Slider
The simple CSS + jQuery slider in a 3d design, inspired by Erik Deiner.
7. Animated Text Shadow
This animated text-shadow pattern uses -webkit-background-clip: text and linear-gradient to simulate striped text shadow.
6. CSS 3D Captioned Domino Image
This is responsive 3d hover effect with better semantic markup, fewer pseudo-elements, and less CSS.
5. Radio Click Through
A simple image slider using radio buttons, written entirely in CSS.
4. Gradient Ghost Buttons
The Gradient Ghost Buttons and text designed by utilizing border image and box shadows.
3. Squishy Toggle Buttons
The simulating squishy rubber buttons, designed by Justin Windle.
Recommended: Fresh Resources for Web Designers
2. Simple Stack Effects
A set of toggle effects that shows how to create simple stack effects using perspective and 3D transform.
SpinKit (a collection of loading indicators) uses CSS animations to create smooth and customizable animation.