CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Generate linear and radial gradients with live preview and copy the CSS code.

Gradient Type

Angle90deg

090180270360

Color Stops (2/4)

100%

Generated CSS

.gradient {
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
}

Presets

Quick Copy

background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)

Related Tools

Pick colors, convert HEX/RGB/HSL

Calculate & scale aspect ratios

Generate favicons from text/emoji

Create CSS box shadows visually