Tools Hub

CSS Gradient Generator

Build a linear or radial gradient visually and copy the CSS.

0%
100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

How it works

  1. 1

    Add color stops

    Pick colors and where they sit in the gradient.

  2. 2

    Adjust the angle

    For linear gradients, set the direction.

  3. 3

    Copy the CSS

    Paste it straight into your stylesheet.