Gradient Generator
Create beautiful CSS gradients with visual editor
Gradient Settings
Configure type and direction
Right
Color Stops
Add and customize gradient colors
%
%
Gradient Presets
Quick start with beautiful presets
Preview
CSS Code
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Usage Examples
Background
.element { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }Text Gradient
.text {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Border Gradient
.border {
border: 2px solid transparent;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background-clip: padding-box;
}