Awesome Toolkit

CSS Gradient Generator

Build linear and radial CSS gradients visually. Live preview and copy-ready CSS output.

Type
90°

Color Stops

CSS Output

How to use the CSS Gradient Generator

  1. Choose Linear or Radial gradient type.
  2. For linear, drag the Direction slider to set the angle.
  3. Pick colors for each stop. Click + Add Stop to add more. The preview and CSS update instantly.
  4. Click Copy to copy the ready-to-use CSS background property.

CSS gradient syntax

Linear gradients use linear-gradient(angle, color1, color2, …). The angle can be in degrees (90deg) or as a direction keyword (to right). Radial gradients use radial-gradient(shape, color1, color2, …). Both can have any number of color stops, optionally with explicit positions (e.g. red 20%, blue 80%).