CSS Gradient Generator

A CSS gradient is a smooth blend between two or more colours, written as a background value. Linear gradients run along an angle, radial gradients spread out from the centre.

Enter your colours, adjust the angle, check the preview and copy the CSS.

Key features

• Linear and radial gradients
• Two or three colour stops
• Angle control
• Live preview

Example

background: linear-gradient(45deg, #ff8800, #0055ff);

How to use

1. Enter two or three colours.
2. Choose linear or radial and set the angle.
3. Copy the CSS line.

Use cases

• Page and button backgrounds
• Hero sections and cards
• Quickly trying colour combinations

In depth

A CSS gradient is an image generated by the browser, so it is used where a background image is allowed, via the background or background-image property, not as a plain colour. In a linear gradient, the angle sets the direction of the gradient line: 0deg points to the top, 90deg to the right and 180deg to the bottom. Colours blend along that line, and each colour stop can have a position in percent or length. Without positions, stops are spaced evenly. A radial gradient spreads outwards from a centre point, by default as an ellipse sized to the box.

Appearance details are worth knowing. By default browsers interpolate in the sRGB colour space, so blending between two saturated colours, such as blue and yellow, can pass through a dull grey zone in the middle. Adding an intermediate stop with a deliberately chosen colour avoids this. Banding, visible stripes in smooth gradients, can appear on large areas with close colours, and a slight noise texture can hide it. Text placed on a gradient must keep enough contrast across the whole background, so check contrast at the lightest and darkest areas, not just at one end. Gradients scale without extra requests, which makes them lighter than image files.

Tips

• Test text contrast at both ends and the middle of the gradient. A heading that is readable on the dark end may become unreadable where the gradient lightens.
• Add a solid fallback colour in a separate background declaration before the gradient line. This gives older browsers or situations where the gradient fails a sensible background.
• Pick colours close in hue for subtle, professional results. Strongly contrasting hues can look harsh, and may need a middle stop to avoid a muddy centre.

Related tools

• Lorem Ipsum Generator Generate placeholder text by paragraphs, sentences or words.
• Password Generator Create strong random passwords with the character types you choose.
• Random Number Generator Generate random numbers in a range, with unique and decimal options.
• Random String Generator Generate random strings, tokens and IDs of any length.
• UUID Generator (v4) Generate random version 4 UUIDs in bulk.