28 Awesome CSS3 Effects To Give Your Website a Modern Look

CSS3 effectsWe 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.

1. SpinKitSpinKit

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

2. Simple Stack EffectsSimple Stack Effects

A set of toggle effects that shows how to create simple stack effects using perspective and 3D transform.

3. Squishy Toggle Buttons
Squishy Toggle Buttons

The simulating squishy rubber buttons, designed by Justin Windle.

4. 3D Text
3D Text

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

5. Color spectrum
Color Spectrum

This is what you get by mixing colors with box-shadow. The color spectrum is a progression among 3 colors.

6. Metro UI

Metro UI

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

7. Elastic stroke

Elastic Stroke

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

8. Layered shapes

Layered shapes

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

9. Spiral CSS
Spiral CSS

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

10. Text animation

Text Animation

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

11. Flat Long Shadow

Flat Long Shadow

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

12. CSS Creatures

CSS Creatures

The beautiful interactive icons entirely made with HTML and CSS.

13. 3D Flip button

3d Flip Button

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

14. Transform Text with Shadow

Transform text with shadow

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

15. CSS Rainbow
CSS Rainbow

This is full circle rainbow with a simple hover effect.

16. Colorful Glitchy 404

Colorful Glitchy 404

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

17. 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.

18. 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.

19. Circle illusion

Circle Illusion

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

20. Seconds Counter

Seconds Counter

An elegant counter perfect for “coming soon” templates.

21. CSS Text-FX

CSS Text-FX

It is created by adding dimmed light to the text, giving you patchy flashes.

22. CSS Menu

Mobile menu

A modern mobile menu with CSS3 animations and transitions.

23. Budget Slider

Budget Slider

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

24. Animated Text Shadow

Animated Text Shadow

This animated text-shadow pattern uses -webkit-background-clip: text and linear-gradient to simulate striped text shadow.

25. 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.

26. Radio Click Through

Radio Click Through

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

27. Gradient Ghost Buttons

Gradient Ghost Buttons

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

28. Flat Icons

Iconex Flat Icon Set

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

You may also like...

Read previous post:
material design web UI Frameworks
Top Material Design Web UI Frameworks

Ever since Google announced their new Design Language, the Material Design, there has been a lot of excitement around its...

Close