Gezidao

Gradient Generator

Design CSS linear gradients visually and copy the code.

Report an issue

Advertisement

AHow to use

  1. 01 Pick the two colors.
  2. 02 Choose a direction preset or type an exact angle (0–360°).
  3. 03 Copy the ready-made CSS code.

QFAQ

What does the angle mean? ＋

90deg points to the right, 180deg downward — the angle is measured clockwise from bottom-to-top. Adjust it for diagonal blends.

Can I use more than two colors? ＋

The generated syntax supports any number of color stops; the visual editor covers the common two-color case, and you can extend the copied code by hand.

→Related tools

→ Color Converter Convert colors between HEX, RGB and HSL with a shade palette. → Contrast Checker Check text/background color contrast against WCAG AA and AAA. → Age Calculator Calculate an exact age in years, months and days — plus the next birthday. → Base64 Encoder & Decoder Encode or decode Base64 text, with full UTF-8 support.