HomeColor Systems
Preview
css
Code
css
.grad-warm    { background: linear-gradient(135deg, #C4640A, #E8A050); }
.grad-cool    { background: linear-gradient(135deg, #1A4A6A, #3A8AAA); }
.grad-nature  { background: linear-gradient(135deg, #2A5A3A, #5A9A6A); }
.grad-purple  { background: linear-gradient(135deg, #4A2A6A, #8A5AAA); }
.grad-sunset  { background: linear-gradient(135deg, #C4640A, #8A3A6A); }
.grad-ocean   { background: linear-gradient(135deg, #1A3A6A, #2A8A9A); }
.grad-neutral { background: linear-gradient(135deg, #3A3836, #7A7876); }
.grad-soft    { background: linear-gradient(135deg, #F2EDE4, #E4D8C8); }
Related Blocks
css
Accessibility Contrast
WCAG AA/AAA compliant color pair table.
css
Brand Color System
A complete hierarchy for primary, secondary, and accent colors.
css
Dark Mode Pair
Color pairs that switch automatically for light and dark mode.