Gradient Generator

Visually create CSS gradient backgrounds

Category

Color Tools

How to Use

  1. Select gradient type (linear/radial)
  2. Choose direction and adjust color stops
  3. Copy the generated CSS code

Examples

  • Linear gradient

    Input: Direction: to right, #3b82f6 → #ec4899

    Output: background: linear-gradient(to right, #3b82f6 0%, #ec4899 100%);

FAQ

How many color stops are supported?
No limit, you can add any number of color stops.

Related tools