CSS Gradient Generator
Create beautiful gradient backgrounds for your websites
Generate CSS gradients with custom colors, directions, and types. Perfect for backgrounds, buttons, and design elements.
CSS Code
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
Popular Gradient Examples
Click on any example to apply it
Sunset Beach
Purple Dream
Pink Sunrise
Ocean Blue
Emerald Green
Peach Sunset
Deep Ocean
Soft Pastel
How to Use This Tool
Choose Colors
Select your gradient colors using the color pickers or enter hex codes.
Adjust Settings
Select gradient type (linear, radial, conic) and direction/angle.
Copy Code
Copy the generated CSS code and use it in your projects.
Try Examples
Click on any example gradient to quickly apply it.