▤

CSS Gradient Generator

Build a linear or radial gradient with live preview and copy the CSS.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Privacy →

Type

Angle (90°)

Color 1 Position 1 (0%)

Color 2 Position 2 (100%)

output

Try a worked example

Example

Choose the linear type, set the angle to 135 and the colors to #ff7e5f and #feb47b. The CSS is background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Moving the first stop to 20 keeps the first color solid across the first 20% of the box.

Keep in mind

0deg points up and 90deg points right, so 135deg runs from the top-left corner to the bottom-right. If text sits on a gradient, check its contrast against both end colors.

About this tool

Create a two-colour linear or radial gradient by choosing colours, positions and an angle, then copy the background rule. The live preview runs entirely in your browser.

Frequently asked questions

What is the angle in a linear gradient?

The angle sets the direction of the colour transition: 0° points up, 90° points to the right, 180° down, and so on.

When should I use radial instead of linear?

Use radial to radiate colours outward from a centre point (like a spotlight); linear blends them along a straight line.