Build CSS gradients with precise color control - hex, RGB, or HSL color stops. Drag-drop to add / remove stops, fine-tune percentages, and export as CSS or copy to design-tool-friendly palette formats (Figma, Sketch, Adobe).
When to use this
Use when: matching brand colors precisely (HSL helps for shade ladders), building accessible gradients (WCAG-checked contrasts), generating consistent gradients across a design system, exporting palettes for design tools.
Frequently Asked Questions
When should I use HSL vs hex?
HSL is great for adjusting lightness while keeping hue constant (e.g. building a tint ladder). Hex is great for matching exact brand colors. Both work; the tool lets you switch between them on the same gradient.
Powered by CSS Gradient Generator.