Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

15 CSS Gradients Examples and Gradient Code

Recommended Articles

Here is a collection of CSS Gradients from codepen.io and around the web. Included are examples and code to use on your own website or web project.

Background Gradient

Gradient Animation

Animated CSS Gradients Using Vars

Animated CSS Gradients Using Vars

Author

  • Mike Byrne

About Project

Animated CSS Gradients Using Vars

Animated CSS Gradients Using Vars is a project on codepen.io which animated the full background of the page using CSS keyframes and CSS vars.

Modern Gradient Buttons

CSS Gradient Tiles

CSS Gradient Tiles

Author

  • Bennett Feely

About Project

CSS Gradient Tiles

CSS Gradient Tiles is a project on codepen.io that display multiple different CSS gradient types.

CSS Gradient Cards

CSS Gradient Cards

Author

  • Ana Tudor

About Project

CSS Gradient Cards

CSS Gradient Cards is a project on codepen.io that display a lot of cards. On each of these cards is a different designed using a blue to orange gradient and different patterns.

CSS Linear Gradients

CSS Linear Gradients

Author

  • AMAN

About Project

CSS Linear Gradient

CSS Linear Gradient is a project on codepen.io which uses CSS linear gradients to color square tiles. The linear gradients use different angles (degrees) and directions.

CSS Gradient Text Background

Gradiator

Animated CSS Gradient Border

Animated Gradient Border

Author

  • Mike Schultz

About Project

Animated CSS Gradient Border

Animated CSS Gradient Border is a CSS gradient border applied as a border in a rectangle shape. Inside the animated gradient border is text.

Pure CSS Gradient Background

Pure CSS Gradient Background

Author

  • Manuel Pinto

About Project

Pure CSS Gradient Background

Pure CSS Gradient Background is a project on codepen.io which uses a CSS gradient animation applied as a background to the body of the document.

Animated Gradient Ghost Button

Animated Gradient Ghost Button

Author

  • Arsen Zbidniakov

About Project

Animated Gradient Ghost Button

Animated Gradient Ghost Button is a project on codepen.io that is a transparent gradient button in which the text and the border are animated. As the animation runs the text and the border are in sync as one moving gradient.

Animated Back Glow

Animated Back Glow

Author

  • George Hastings

About Project

Animated Back Glow

Animated Back Glow is a project on codepen.io that represents a floating platform with an animated glowing gradient beneath it.

Pastel Gradients

Pastel Gradients

Author

  • Laura Robertson

About Project

Pastel Gradients

Pastel Gradients is a project on codepen.io which shows multiple bars of pastel CSS gradient horizontal bars. These styles can be grabbed and used on any website or web project.

Scrolling Gradient

Scrolling Gradient

Author

  • Mike

About Project

Scrolling Gradient

Scrolling Gradient is a project on codepen.io that when the user scrolls down the page the gradient in the background changes!