CSS Gradient Generator - Create Beautiful Gradients

Create beautiful CSS gradients with live preview and multiple export formats. Generate linear and radial gradients, export as CSS, SCSS, or Tailwind config with instant preview.

Gradient Type

Angle: 90°

Color Stops

Presets

Click a preset to apply it

Preview

Export Formats

Copy code in different formats

CSS

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

SCSS Variable

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

Tailwind Config

backgroundImage: {
  'custom-gradient': 'linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%)'
}

Tip: Linear gradients flow in a straight line at the specified angle. Radial gradients emanate from the center outward in a circular pattern.