NiftyKit

CSS Gradient Generator

Design linear, radial and conic gradients and copy the CSS.

By Updated

Runs in your browser. Your input is not uploaded.

Presets

Type
Colour blending

Colour stops

    Enter any CSS colour, such as #5038d4, rgb(80 56 212 / 50%) or transparent. Two stops at the same position make a hard edge. Up to 16 stops.

    CSS

    Paste a CSS gradient to edit it

    How to use it

    1. Choose a type: linear (a straight line), radial (outwards from a centre) or conic (around a centre, like a colour wheel). Or start from a preset.
    2. Set the direction, shape or centre. The preview updates as you go.
    3. Edit the colour stops: change their colours and positions, add more, or move a colour up or down the list.
    4. Copy the CSS and paste it into your stylesheet.

    To change a gradient you already have, open Paste a CSS gradient to edit it, paste it and chooseLoad gradient.

    How the settings map to CSS

    • Angle: 0° points up, 90° to the right, 180° down. The arrow buttons set the common directions.
    • Size (radial): where the last colour stop lands, for example the farthest corner of the box from the centre.
    • Start angle (conic): where the first colour begins, measured clockwise from the top.
    • Stop positions are percentages: of the gradient line for linear, of the size for radial, and of a full turn for conic gradients. Stops are always written in position order, which is what browsers expect.
    • Repeat repeats the stops over and over, so stops that end at 25% repeat four times.

    Colour blending and the fallback line

    Browsers normally blend colours in sRGB, which can make the middle of a gradient look dull or grey. TheOKLab option blends so the brightness changes evenly, and OKLCH travels around the colour wheel, keeping colours vivid.

    These options use the newer in oklch syntax. When you choose one, the CSS has two lines: a standard gradient first, then the improved one. Browsers that understand the second line use it; older ones ignore it and keep the first, so nobody sees a missing background.

    Limitations

    • Colours are written as HEX (with two extra digits for transparency). Colours outside the sRGB range, such as very saturated OKLCH or Display P3 colours, are changed to the nearest colour that range can show.
    • Positions are percentages only. Pasted gradients with px positions, exact radial sizes or colour hints (a position on its own between two colours) cannot be loaded.
    • Corner directions such as to top right become angles. They match exactly only on square boxes, because a corner direction depends on the box’s shape.
    • Only one gradient is edited at a time; layered backgrounds keep just their first gradient.

    Frequently asked questions

    Do CSS gradients work in every browser?

    Linear, radial and conic gradients, and their repeating versions, work in every current browser without prefixes. The only newer part is choosing a colour space such as OKLCH for blending, which is why the tool adds a standard version first when you use it: older browsers use that and ignore the line they do not understand.

    Why does the middle of my gradient look grey or muddy?

    By default, browsers blend colours in the sRGB colour space, which takes a straight line between the two colours. Between colours on opposite sides of the colour wheel, such as blue and yellow, that line passes through grey. Choose OKLab to keep the brightness even, or OKLCH to travel around the colour wheel and keep the colours vivid.

    How do I make a hard edge or stripes?

    Give two neighbouring stops the same position, for example red at 50% and blue at 50%. The colour then changes instantly instead of fading. For stripes, turn on Repeat and keep all the stops within a small range, such as 0% to 10%; the Stripes preset shows how.

    Should I use background or background-image?

    The tool writes background-image, which only sets the gradient and leaves any background colour, size or position you have already set alone. The background shorthand works too, but it resets those other background properties at the same time.