Controls
Number of Colors:
Click on colour to select, or input hex color code
Live Preview
Your Gradient
Usage Examples:
Button
Card
Header
Text
BG
Create stunning gradients for buttons, backgrounds, with this CSS Gradient maker
Click on colour to select, or input hex color code
Tutorial: Now you see how the code is assembled, you can edit the angle and add even more colors.
Try warm colors like orange, pink, and purple for that magical golden hour feeling.
Blues and teals create calming, professional backgrounds perfect for business sites.
Green gradients suggest growth, health, and eco-friendliness - great for organic brands.
Bright, contrasting colors grab attention - perfect for call-to-action buttons.
Use analogous colors (next to each other on color wheel) for pleasing, natural looks.
Dark purples, golds, and deep blues convey premium quality and sophistication.
Everything you need to know about creating modern, colorful websites with gradients
style="background: your-gradient-code" directly to your HTML
element #my-element { background: your-gradient-code; } background: #4285f4;
background:
linear-gradient(...);