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

3D Text

Give your heading text a 3d look with cool fonts and amazing shadow effects.

27. Flat Icons

Iconex Flat Icon Set

The pure CSS Iconex Flat Icon Set (4 icons), designed by Alireza Attari.

26. Color Spectrum

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

Metro UI

The Metro UI inspired by Windows 8 design, entirely created with CSS3. The icons are extracted from FontAwesome.

24. Elastic Stroke

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

Layered shapes

Beautiful colored plus layered shapes (entirely written in CSS), designed by Snhasani.

22. Spiral CSS

Spiral CSS

A cloudy spiral CSS animation that can be used as a loading icon.

21. Text Animation

Text Animation

Yoann created this amazing ticker effect with text animation. The toggling effect of second word looks pretty cool.

20. Flat Long Shadow

Flat Long Shadow

This is ultimate shadow mixin packed with fade variables, long shadows and angle variable.

19. CSS Creatures

CSS Creatures

The beautiful interactive icons entirely made with HTML and CSS.

18. 3d Flip Button

3d Flip Button

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

17. Transform Text with Shadow

Transform text with shadow

This is CSS text shadow designed with advanced typography techniques using lettering.js.

16. CSS Rainbow

CSS Rainbow

This is full circle rainbow with a simple hover effect.

15. Colorful Glitchy 404

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

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

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

Circle Illusion

Circle illusion with Tusi motion, designed by Jaime Caballero. You can use it as a page loading bar/icon.

11. Seconds Counter

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

Mobile menu

A modern mobile menu with CSS3 animations and transitions.

8. Budget Slider

Budget Slider

The simple CSS + jQuery slider in a 3d design, inspired by Erik Deiner.

7. Animated Text Shadow

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

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

Radio Click Through

A simple image slider using radio buttons, written entirely in CSS.

4. Gradient Ghost Buttons

Gradient Ghost Buttons

The Gradient Ghost Buttons and text designed by utilizing border image and box shadows.

3. Squishy Toggle Buttons

Squishy Toggle Buttons

The simulating squishy rubber buttons, designed by Justin Windle.

Recommended: Fresh Resources for Web Designers

2. Simple Stack Effects

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

Written by
Varun Kumar

I am a professional technology and business research analyst with more than a decade of experience in the field. My main areas of expertise include software technologies, business strategies, competitive analysis, and staying up-to-date with market trends.

I hold a Master's degree in computer science from GGSIPU University. If you'd like to learn more about my latest projects and insights, please don't hesitate to reach out to me via email at [email protected].

View all articles
Leave a reply

  • Nenad Markovski says:

    Awesome CSS3 effects suggestions. I am definitely gonna use the 3D effect in my main menu texts for a great dazzling effect. I love the CSS creatures as well. Very inspiring ideas to apply in my blogs!

  • Animesh Singh says:

    Hey Varun! How do you manage your time and post on these wonderfil topics. I am also going to start a Programming and Web Developing and Blogging’. I’I’ll glad if I get some tips from you.

    • Varun Kumar says:

      Student by day, marketer/blogger/designer by night 🙂