28 Awesome CSS3 Effects To Give Your Website a Modern Look
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.
SpinKit (a collection of loading indicators) uses CSS animations to create smooth and customizable animation.
A set of toggle effects that shows how to create simple stack effects using perspective and 3D transform.
The simulating squishy rubber buttons, designed by Justin Windle.
4. 3D Text
Give your heading text a 3d look with cool fonts and amazing shadow effects.
This is what you get by mixing colors with box-shadow. The color spectrum is a progression among 3 colors.
6. Metro UI
The Metro UI inspired by Windows 8 design, entirely created with CSS3. The icons are extracted from FontAwesome.
This is elastic stroke of the text with beautiful color scheme and the effects are made with CSS and SVG.
Beautiful colored plus layered shapes (entirely written in CSS), designed by Snhasani.
9. Spiral CSS
A cloudy spiral CSS animation that can be used as a loading icon.
10. Text animation
Yoann created this amazing ticker effect with text animation. The toggling effect of second word looks pretty cool.
11. Flat Long Shadow
This is ultimate shadow mixin packed with fade variables, long shadows and angle variable.
12. CSS Creatures
The beautiful interactive icons entirely made with HTML and CSS.
13. 3D Flip button
This is CSS text shadow designed with advanced typography techniques using lettering.js.
15. CSS Rainbow
This is full circle rainbow with a simple hover effect.
17. 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.
The Horizontal Accordion made with pure CSS. It includes elements (instead of images) and Genericons font for the social networking icons.
19. Circle illusion
A Circle illusion with Tusi motion, designed by Jaime Caballero. You can use it as a page loading bar/icon.
20. Seconds Counter
An elegant counter perfect for “coming soon” templates.
21. CSS Text-FX
It is created by adding dimmed light to the text, giving you patchy flashes.
22. CSS Menu
A modern mobile menu with CSS3 animations and transitions.
23. Budget Slider
The simple CSS + jQuery slider in a 3d design, inspired by Erik Deiner.
This animated text-shadow pattern uses -webkit-background-clip: text and linear-gradient to simulate striped text shadow.
This is responsive 3d hover effect with better semantic markup, fewer pseudo-elements, and less CSS.
A simple image slider using radio buttons, written entirely in CSS.
The Gradient Ghost Buttons and text designed by utilizing border image and box shadows.
28. Flat Icons
The pure CSS Iconex Flat Icon Set (4 icons), designed by Alireza Attari.