Utilore

CSS Gradient Generator

Drag the sliders and watch the panel above change with them. When it looks right, copy the line and paste it into your stylesheet — nothing else is needed.

The angle applies to linear and conic gradients; a radial one spreads from the centre.

Colour stops

    How to use

    1. Pick a type: linear runs along a line, radial spreads from the centre, conic sweeps around it.
    2. Set the angle and move the stops to where the colours should meet.
    3. Add more stops if two colours are not enough, or press «Surprise me».
    4. Copy the CSS line under the preview.

    Good to know

    Why the preview sits on a checkerboard

    A gradient often ends in a transparent colour, and on a plain white panel that looks the same as an opaque one. The checkerboard shows through wherever the colour is not solid, so what you set is what you see — a habit borrowed from image editors for exactly this reason.

    Stops are sorted before the code is written

    CSS does not reorder colour stops for you: a stop at 70% written before one at 30% makes the browser clamp the second, and the gradient quietly loses a colour. The tool sorts the stops by position when it builds the line, so dragging a slider past its neighbour never breaks the result.

    Frequently asked questions

    What is the difference between the three types?

    A linear gradient runs along a straight line and takes an angle: 90deg goes left to right, 180deg top to bottom. A radial one spreads in circles from the centre, which suits glows and spotlights. A conic gradient sweeps around a point like a clock hand, and it is what pie charts and colour wheels are built from.

    How do I make a gradient with transparency?

    Choose a colour and lower its opacity in the picker if your browser offers alpha, or edit the copied line by hand: rgba(31, 95, 214, 0) works as a stop just like a solid colour. A fade to transparent is more useful than a fade to white — it works over any background.

    Can I use it as a text colour?

    Yes, with two extra lines: put the gradient on background-image, then add background-clip: text and color: transparent. The text keeps its shape, and the gradient shows through the letters.

    Why does the same angle look different in radial mode?

    It does not apply there at all. A radial gradient starts from the centre and has no direction, so the angle stays for the linear and conic modes, where it decides where the sweep begins.

    Related tools