CSS gradient generator

How CSS gradients work

A CSS gradient is a smooth transition between two or more colours, generated by the browser with no image needed. Because it is rendered in the browser rather than loaded as an image file, a gradient stays sharp at any size, adds nothing to your page weight, and can be changed instantly by editing the CSS. The two main types are linear-gradient(), which runs along a straight line at a chosen angle, and radial-gradient(), which radiates outward from a centre point.

Each colour in a gradient is a stop, and you can place it at a specific percentage along the line — for example linear-gradient(90deg, #f54927 0%, #4aa8ff 100%). Add more stops for richer, multi-colour effects, and move their positions to control where each colour begins and ends.

Understanding the angle

For a linear gradient, the angle sets the direction the colours flow. 0deg runs bottom to top, 90deg runs left to right, 180deg top to bottom, and 45deg runs diagonally. A common point of confusion: in CSS, 0deg points up, and angles increase clockwise — so 90deg points right. The angle slider above lets you dial this in visually rather than guessing.

Linear vs radial — when to use each

Reach for a linear gradient for backgrounds, buttons, headers and hero sections where you want a directional sweep of colour. Use a radial gradient for spotlights, glows, badges and anything that should appear to emanate from a central point. Radial gradients are especially effective for subtle vignettes and soft focal points behind content.

Tips for gradients that look good

A few practical pointers: keep the two colours reasonably close in lightness if you want a smooth, calm blend, or push them apart for high drama. Gradients between a colour and a slightly shifted hue (rather than just a darker version of the same colour) tend to look richer — try pairing a warm and a cool tone. If a gradient looks muddy in the middle, that grey "dead zone" comes from the two colours being near-complementary; nudge one hue closer to the other to fix it. For accessibility, remember that text over a gradient needs to stay readable across the whole sweep, so check contrast against both ends.

Using the result

Copy the generated CSS and drop it into any background property. Want to fine-tune the individual colours first? Build them in the colour picker or convert existing values, then paste the hex codes into the stops above. You can also pull a ready-made palette from the image picker and use two of those colours as your gradient stops.