CSS Gradient Generator

Build linear and radial CSS gradients visually and copy the CSS.

Runs in your browser. Your text and files never leave your device.

    How to make a CSS gradient
    1. Choose linear or radial.
    2. Pick colours and move their positions. Add up to eight stops.
    3. Set the angle for a linear gradient, then press Copy CSS.
    Tip: gradients between two strongly different hues can look muddy in the middle. Add a third stop with an in-between colour to keep it bright.
    Frequently Asked Questions
    How do I use the CSS?
    Copy the line and paste it into your stylesheet, for example: .hero { background: linear-gradient(90deg, #006a4e 0%, #f42a41 100%); }. All modern browsers support it without prefixes.
    Linear or radial?
    Linear blends colours along a straight line at the angle you choose. Radial blends outward from the centre in a circle or ellipse.
    How many colours can I add?
    Up to eight colour stops. Each stop has a colour and a position from 0% to 100%.
    How do I make text with a gradient?
    Use the gradient as the background of the text element, then add background-clip: text and color: transparent. Keep enough contrast for readability.
    Free tool: JSON FormatterFormat, validate and minify JSON. Errors show the exact line and column.Free tool: Base64 Encode and DecodeEncode text or files to Base64 and decode Base64 back, with full UTF-8 support.Free tool: URL Encode and DecodePercent-encode text for URLs and decode encoded URLs back to readable text.Free tool: UUID GeneratorGenerate random UUID v4 (GUID) values, one or a thousand at a time.