About the CSS Gradient Generator
This CSS gradient generator builds background gradients visually: pick two or three colours, set where each stop sits, choose a linear angle, a radial shape or a conic sweep, and copy production-ready CSS. The output includes a solid fallback colour for very old browsers or email clients and an equivalent Tailwind CSS arbitrary-value class, so it drops straight into any stack.
It is built for front-end developers, designers and marketers making hero sections, buttons, cards, banners and social graphics. Colours can be hex, rgb(), hsl() or CSS names, including translucent colours for overlays on top of images.
Gradients are interpolated by the browser in the sRGB colour space by default. The fallback colour shown here is the gradient’s midpoint, a good solid substitute when gradients are not supported.
How to use the css gradient generator
- 1Choose linear, radial or conic.
- 2Set the angle (linear/conic) or the shape and centre (radial).
- 3Enter two or three colours and drag their positions.
- 4Check the live preview.
- 5Copy the CSS, or the Tailwind class, into your stylesheet or markup.
Formula and method
A CSS gradient is an image the browser draws by blending between colour stops. For a linear gradient the angle sets the direction of the gradient line (0deg points up, 90deg to the right, 135deg towards the bottom-right), and each stop’s percentage says where along that line its colour is fully reached; between two stops the colour is interpolated channel by channel.
Radial gradients spread outwards from a centre point as a circle or an ellipse, and conic gradients sweep colours around a centre starting from the given angle. The fallback colour is the colour at the 50% point, calculated by linear interpolation between the two neighbouring stops.
- angle
- Direction of a linear gradient, or start angle of a conic gradient
- p%
- Position of each colour stop along the gradient
Worked examples
Indigo to pink hero background
A 135° linear gradient runs from the top-left to the bottom-right. Halfway along, the colour is the average of rgb(99,102,241) and rgb(236,72,153) = rgb(167.5, 87, 197), which rounds to #a857c5 — used as the solid fallback.
Three-stop radial glow
The cyan centre fades to blue at 50% of the radius and to deep indigo at the edge. The midpoint colour sits exactly on the 50% stop, so the fallback is #3b82f6.
Conic sweep with colour names
Named colours are converted to hex. The sweep starts at 90° (pointing right), reaches yellow halfway round and returns to red, so the seam is invisible.
Frequently asked questions
How do I make a gradient background in CSS?+
Set the background (or background-image) property to a gradient function, e.g. background: linear-gradient(135deg, #6366f1, #ec4899). Gradients are images, so they work anywhere background images do.
What is the difference between linear, radial and conic gradients?+
Linear gradients blend along a straight line at an angle, radial gradients spread outward from a centre point as a circle or ellipse, and conic gradients rotate colours around a centre, like a colour wheel or pie chart.
How do I add a gradient to text?+
Apply the gradient as the background, then add background-clip: text and color: transparent (plus -webkit-background-clip: text for Safari). The gradient then shows only through the letters.
Do CSS gradients work in all browsers?+
Linear and radial gradients work in every modern browser without prefixes; conic gradients work in all major browsers since Firefox added them in late 2020 (Chrome and Safari supported them earlier). Some email clients ignore gradients, which is why the solid fallback line is included.
Why does my gradient look banded or muddy in the middle?+
Blending two saturated complementary colours in sRGB can pass through grey. Add a third stop with a brighter midpoint colour, or in modern browsers use in oklch to interpolate in a perceptual colour space.
Sources