Collection of free CSS gradient code examples from Codepen and other resources

CSS Rainbow Gradient Border

conic-gradient() panels

Gradient Spinner

Multiple background-clip

Gradient Ordered List

A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again.

CSS Gradient Counter List

An example of CSS counter with a fixed background gradient.

Gradient Collection

A small collection of CSS gradients.

Scrolling Gradient

Gradient

Radial Gradient Spotlight Effect

This example shows how CSS radial gradients can be used to create a focusable spotlight effect.

Dithered CSS Gradients

Mixing noise with CSS gradients helps to remove banding, but results in an overall grainy texture. By overlaying gradients and applying masks the dithering can be controlled to affect the areas where colours blend only. The strength of the dithering is affected by the noise image (the one used here is quite pronounced giving a grainy look, but the effect can be much more subtle).

Pretty Underline

CSS-only Numbered Lists with Drop Shapes

Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.

Animated CSS Gradient Border

Gradient Backgrounds - Linear, Radial, Duotone

Animated Back Glow

CSS Gradient Hover Effect

A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.

Animated Paralax Gradients

Playing with gradients, animation, and scroll position to create a dynamic scrolling effect.

CSS Hue Rotation with Gradient

Button with Gradient Shadow

Radar

A radar display made with only one element. To avoid using a child span or div, I drew everything using multiple sets of backgrounds. For the scanning animation though, we needed to use :before for the part to animate.

Tile with Gradient Title

SVG Text Clip with Gradient & GIF

Gradient Forest on Pure CSS

CSS Sunset Sunrise

Move the sun around with your mouse.

Gradients

Sky Gradients

24 CSS3 sky gradients for a future experiment. Click on to get a full width preview.

Brushed Metal

The texture is done by using 3 repeating-gradients with different length.

CSS3 Patterns Gallery