🎨 Gradient Generator & CSS Builder
❓ Help
Gradient Editor
Linear
Radial
Conic
Angle:
90
°
0°
180°
360°
Color Stops
+ Add Color Stop
Enable Animation
Animation Speed:
3
s
Normal
Multiply
Screen
Overlay
Darken
Lighten
CSS Output & Actions
📋 Copy CSS
🖼️ Export Image
🎲 Random Gradient
🔄 Reverse Gradient
💾 Save Gradient
📥 Import CSS
🔗 Generate API
🎯 Design System
Gradient Presets
Saved Gradients
Compare Gradients
+ Add Current to Compare
API Access
×
📚 Help & Instructions
Gradient Types:
Choose between Linear, Radial, or Conic gradients using the buttons at the top.
Angle Control:
Adjust the gradient angle using the slider (0-360 degrees) for linear gradients.
Color Stops:
Add multiple colors to your gradient. Each color has:
Color picker - choose any color
Position slider - adjust where the color appears (0-100%)
Opacity slider - control transparency
Animation:
Enable gradient animation with the toggle and adjust speed.
Blending Modes:
Apply different blend modes to your gradient.
Presets:
Click any preset to quickly apply popular gradient combinations.
Save Gradients:
Save your custom gradients for later use.
Export Image:
Download your gradient as a PNG image.
Copy CSS:
Copy the CSS code to use in your projects.
Random Gradient:
Generate a random gradient for inspiration.
Reverse Gradient:
Flip the order of color stops.
Import CSS:
Paste CSS gradient code to import it.
API Access:
Get API code to integrate with your applications.
Design System:
Integrate with popular design systems.
Compare:
Compare two gradients side by side.
×
📥 Import CSS Gradient
Import
×
🎯 Design System Integration
Select Design System...
Material Design
Tailwind CSS
Bootstrap
Ant Design