CSS Gradient Generator

Create beautiful CSS gradients with live preview. Linear and radial gradients supported.

Preview

Gradient Type

Colors

Start Color

End Color

Angle: 135°

0°90°180°270°360°

Presets

CSS Code

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

Full CSS Example

.gradient-bg {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  /* For modern browsers */
  background: -webkit-linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}

Tailwind Classes

<!-- Using arbitrary values -->
<div className="bg-[linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%)]">
  Your Content
</div>

Use Cases

Button

Card

Card Title

Card content goes here

Text Gradient

Gradient Text

Related Tools

🎨 Color Picker

Pick individual colors

🎭 Palette Generator

Generate color schemes

💻 Tailwind Generator

Export as Tailwind config