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

Image to SVG Converter

Convert raster images to scalable SVG vectors with advanced controls

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

SVG Wave Generator

Generate beautiful SVG waves and shapes for websites and section dividers

Twitter/X Banner Cropper

Crop and resize images to the perfect Twitter/X header size (1500x500px)

Design Editor

Compose graphics with text, shapes, and SVG icons and export as PNG