About the CSS Gradient Generator
This builds a CSS gradient visually and gives you the exact code to paste into your stylesheet. Instead of guessing colour values and angles by hand, you pick two colours and a direction, watch the preview update live, and copy the background rule when it looks right. It's handy for buttons, hero sections, card backgrounds, banners and any UI element that needs a smooth colour transition.
How it works
You choose two colours and a gradient type:
- Linear — colours blend along a straight line at an angle you set (0–360°), so you can make the gradient run top-to-bottom, left-to-right, diagonally, or any direction.
- Radial — colours blend outward from the centre in a circle.
The preview panel shows the result immediately, and the output box gives you ready-to-use CSS like background: linear-gradient(45deg, #…, #…); to copy straight into your styles.
Assumptions and behaviour
- Produces a two-colour gradient (a start and an end colour).
- Linear gradients use an angle in degrees; 0° points up, 90° points right, following the CSS convention.
- Radial gradients blend from the centre outward as a circle; the angle control is hidden since it doesn't apply.
- The generated CSS is standard and works in all modern browsers without vendor prefixes.
Limitations
- Two colour stops only. It doesn't support three-or-more-stop gradients, custom stop positions, or multiple layered gradients — for those you'd edit the CSS by hand.
- It offers linear and radial, not conic gradients or repeating gradients.
- Radial gradients use the default centred circle; it doesn't expose shape, size or position keywords.
- It generates the
backgrounddeclaration; it doesn't handle fallbacks for very old browsers (rarely needed today).
Privacy
The gradient and its CSS are generated entirely in your browser. Nothing is uploaded or stored.
Get FreeMyTask as an app