CSS Gradient Generator

Create beautiful CSS gradients with live preview and export options

Linear GradientsRadial GradientsLive PreviewCSS ExportPreset Library
Gradient Type
Colors
Add and adjust color stops
Quick Actions
Live Preview
CSS Code
Preset Gradients
Click to apply popular gradient combinations
Usage Examples

HTML + CSS

<div class="gradient-bg">
  <h1>Beautiful Gradient Background</h1>
</div>

<style>
.gradient-bg {
  
  padding: 2rem;
  color: white;
  text-align: center;
}
</style>
Love this tool? Share it!

Help others discover this amazing free tool ✨

Free forever • No sign-up required