CSS gradient generator

Build a linear or radial CSS gradient on your device. Pick two colors, set the angle, and copy the ready-to-use background rule.

Angle
90°
CSS
background: linear-gradient(90deg, #3057f2 0%, #00ccc5 100%);

Use your gradient

Choose the start and end colours. Linear blends across a direction; radial blends out from the centre. For a linear gradient, change the angle to turn the direction.

Copy the CSS rule and paste it inside the selector for the element you want to style, such as the body or a banner. In a website builder, use its custom CSS area if it has one.

The output is CSS code, not a downloaded image. Check that any text placed over the gradient remains easy to read at both ends.

Read the guide to making a CSS gradient background.