WebAssetKit

CSS & colour

CSS Gradient Generator

Design a gradient visually and copy the CSS. Add as many colour stops as you like, set each stop’s position and transparency, and switch between linear, radial and conic types.

Loading tool…

Preview

CSS

Presets

Gradient

90°

Colour stops

    How to use the CSS Gradient Generator

    1. Choose a gradient type and, for linear and conic gradients, an angle.
    2. Edit the colour stops: change colours, move positions, adjust opacity, add or remove stops.
    3. Watch the preview update, or start from a preset.
    4. Copy the CSS and paste it into your stylesheet.

    Tips for better results

    • Hard edges are made by giving two stops the same position.
    • For smoother gradients between similar hues, add a middle stop instead of relying on the browser’s straight blend.
    • Text on a gradient needs enough contrast at its lightest and darkest point; check both with the contrast checker.

    Limitations you should know about

    • The output uses standard CSS gradient syntax supported by all current browsers. It does not add vendor prefixes, which are no longer needed for modern browsers.
    • Gradients render slightly differently across screens and colour profiles.

    Frequently asked questions

    How do I use the generated code?

    Paste the line into a rule, for example .hero { background: linear-gradient(...); }. The tool includes a solid-colour fallback line that you may keep for very old browsers.

    What is the difference between linear, radial and conic gradients?

    Linear gradients blend along a straight line, radial gradients spread out from a centre point, and conic gradients sweep around a centre like a colour wheel.

    How do I make a gradient with transparency?

    Lower the opacity on a stop. The tool outputs an rgba() colour for that stop.

    Related tools