Gradient Generator

Create beautiful CSS gradients with live preview and export options

Gradient Type

Type

Direction: 45°

Color Stops

Presets

Live Preview

CSS Output

Background Propertybackground: ;

Background Imagebackground-image: ;

Usage Examples

CSS Class

.gradient {
  background: ;
}

HTML

<div class="gradient">
  <!-- Your content here -->
</div>

Inline Style

<div style="background: ;">
  <!-- Your content here -->
</div>