Gradient Generator

NEW

Create beautiful CSS gradients with live preview. Export to CSS, SCSS, Tailwind, or SVG formats.

Live Preview

linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%)

Color Stops

Stop 1

Stop 2

Settings

Gradient Type

Direction

Presets

Sunset

Ocean

Purple

Rainbow

Fire

Cool Sky

Warm Flame

Night

Export Code

CSS

background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);

SCSS

$gradient: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);

TAILWIND

bg-gradient-to-r from-[#ff6b6b] to-[#4ecdc4]

SVG

<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#4ecdc4;stop-opacity:1" />
  </linearGradient>
</defs>

Gradient Tips

Color Harmony

Use complementary or analogous colors for pleasing gradients.

Performance

CSS gradients are more efficient than background images.

Accessibility

Ensure sufficient contrast when placing text over gradients.