Gradient Generator

Create linear, radial, and conic CSS gradients with multiple color stops

Create stunning CSS gradients with multiple stops, angles, and export options

Gradient Type

Angle: 45°

0°90°180°270°360°

Color Stops (2)

100%

Quick Presets

Preview

Export Code

CSS

/* CSS Gradient */
background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);

Tailwind CSS

/* Tailwind - Add to tailwind.config.js */
backgroundImage: {
  'custom-gradient': 'linear-gradient(45deg, #FF512F 0%, #DD2476 100%)',
}

SVG

<!-- SVG Gradient -->
<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#FF512F" />
    <stop offset="100%" stop-color="#DD2476" />
  </linearGradient>
</defs>

Related Tools in Design Tools

SVG Background Generator

Generate SVG background patterns

Featured

SVG Converter

Convert SVG files to other formats

Featured

SVG Optimizer

Optimize SVG files

SVG Placeholder Generator

Generate SVG placeholders

Color Palette Generator

Generate and export color palettes using harmony rules like analogous, triadic, and complementary

Font Pairing Tool

Discover and preview Google Font combinations filtered by mood, use case, and category