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
CSS Code & Examples:
Get the code you understand, and paste into your page <> code view (properties)
Inline HTML Style:
<button style="background: linear-gradient(135deg,
#667eea, #764ba2, #f093fb);">
Click Me!
</button>
Click Me!
</button>
CSS Class Style:
<style>
#my-gradient {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
}
</style>
#my-gradient {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
}
</style>
CSS Property Only:
background: linear-gradient(135deg,
#667eea, #764ba2, #f093fb);
Tutorial: Now you see how the code is assembled, you can edit the angle and add even more colors.
Creative Tips & Inspiration
Sunset Vibes
Try warm colors like orange, pink, and purple for that magical golden hour feeling.
Ocean Depths
Blues and teals create calming, professional backgrounds perfect for business sites.
Nature Fresh
Green gradients suggest growth, health, and eco-friendliness - great for organic brands.
High Energy
Bright, contrasting colors grab attention - perfect for call-to-action buttons.
Color Harmony
Use analogous colors (next to each other on color wheel) for pleasing, natural looks.
Luxury Feel
Dark purples, golds, and deep blues convey premium quality and sophistication.
