28 Amazing 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.

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.

24. Elastic Stroke

This is elastic stroke of the text with beautiful color scheme and the effects are made with CSS and SVG.

Read: 50+ Beautiful Typography Examples for your Inspiration

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

A simple CSS3 3d flip button using no JavaScript and no image.

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

The amazing glitch (plus vibration) effect made with CSS and a bit of JavaScript.

Read: 100+ Creative and Funny 404 Error Pages

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.

Read: 40+ Beautiful Under Construction and 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.

1. SpinKit

SpinKit (a collection of loading indicators) uses CSS animations to create smooth and customizable animation.

Now Read: 26 Modern jQuery Plugins To Make Your Website Better