By ToolzHive · Updated
Apply a starter declaration to an element with visible dimensions and customize it with the gradient tool.
Visual library
background: linear-gradient(135deg, #F97316, #FDE68A);
background: linear-gradient(135deg, #0F766E, #38BDF8);
background: linear-gradient(135deg, #4C1D95, #C4B5FD);
background: linear-gradient(135deg, #BE123C, #FB923C);
background: linear-gradient(135deg, #14532D, #86EFAC);
background: linear-gradient(135deg, #0F172A, #64748B);
background: radial-gradient(circle at top left, #FDE68A, #92400E);
background: conic-gradient(#EF4444, #EAB308, #22C55E, #3B82F6, #EF4444);
Reference table
| Name | CSS declaration |
|---|---|
| Warm dawn | background: linear-gradient(135deg, #F97316, #FDE68A); |
| Ocean | background: linear-gradient(135deg, #0F766E, #38BDF8); |
| Violet sky | background: linear-gradient(135deg, #4C1D95, #C4B5FD); |
| Rose sunset | background: linear-gradient(135deg, #BE123C, #FB923C); |
| Forest | background: linear-gradient(135deg, #14532D, #86EFAC); |
| Slate | background: linear-gradient(135deg, #0F172A, #64748B); |
| Radial glow | background: radial-gradient(circle at top left, #FDE68A, #92400E); |
| Conic wheel | background: conic-gradient(#EF4444, #EAB308, #22C55E, #3B82F6, #EF4444); |
Readability
Check text contrast across the whole area behind it. Bright and dark zones can move relative to content at different viewport sizes.
Fallback
Set a solid background-color before the gradient. Add an overlay or solid text panel if contrast is hard to maintain.
Try the related tools
- CSS Gradient Generator — Create beautiful linear and radial gradients with live preview.
- Contrast Checker — Check text and background contrast against WCAG AA and AAA.