CSS Gradient Generator

Light you can shape

Drag the nodes. Sculpt an OKLCH mesh that never turns gray. Copy CSS, Tailwind, or SCSS.

Start from

From the makers of Color Extractly for Figma →

Curated

Need a spark?

Hand-picked gradients and colour ramps from the Color Extractly library. Click a gradient to load it into the editor; click a ramp step to copy its hex.

Mint Sunset #c5f9d7 → #f27a7d Deep Sky #62cff4 → #2c67f2 Lemon Blossom #fff7d3 → #ffbcd9 Peach Lagoon #fcd8ba → #38c8f4 Amber Flare #ffb300 → #ffbc9d Shorebreak #5eacd1 → #cdf981 Lilac Haze #a46cf3 → #8fbce0 Prism Pop #f9ce34 → #6228d7 Neon Orchid #fa8bff → #29ffb8 Cool Current #5ffbf1 → #d16ba5 Winter Berry #c5eddb → #b93c51 Coral Glow #f37862 → #f7f592 Dusty Bloom #d797c7 → #f79777 Sherbet Fizz #feb562 → #c7b3fd Tangerine Rose #ff9752 → #ff70b5 Midnight Dive #1cb5e0 → #000851 Spring Limeade #dcff7a → #75f5cf Ultraviolet #8e2de2 → #4a00e0 Apricot Dream #fdb99b → #cf8bf3 Sea Spark #2af598 → #009efd Flamingo Hour #f857a6 → #ff9a57 Electric Tide #202db6 → #00f5ff Night Signal #230863 → #ff073a Aurora Field #00ff87 → #171763 Ember Depth #ff6b6b → #0f3460 Periwinkle Meadow #9494e6 → #72e49d Violet Tonal #7c3aed Coral Warmth #ff6b6b Mint Analogous #34d399 Sky Tonal #38bdf8 Amber Jewel #fbbf24 Rose Pastel #fb7185 Indigo Mono #6366f1 Teal Analogous #2dd4bf Lime Jewel #a3e635 Fuchsia Pastel #e879f9 Slate Mono #64748b Ocean Tonal #0ea5e9

For Figma

Take your colors into Figma

Gradient Studio is built by the team behind Color Extractly: extract palettes from any code, check contrast with PAS scoring, and turn inspirations into real Figma variables. Curious first? Try the interactive demo.

Meet Color Extractly

FAQ

Good to know

Why do my CSS gradients look gray in the middle?

Classic CSS gradients blend in sRGB, and the straight line between two vivid colors often passes through low-saturation territory: that's the gray dead zone. OKLCH interpolation follows the way humans actually perceive color, so a blue-to-pink gradient stays vivid the whole way. Use the hold-to-compare button in the editor to see the difference on your own colors.

Which browsers support OKLCH gradients?

All current versions of Chrome, Edge, Firefox, and Safari support linear-gradient(in oklch, ...). For older browsers, ship the sRGB fallback first and the OKLCH version second: browsers that understand it win, the rest stay safe. The Fallback CSS panel gives you both blocks ready to paste.

Can I use these gradients with Tailwind?

Yes. Switch the output to Tailwind and you get an arbitrary-value utility class you can drop straight into your markup. For repeated use, move the gradient into your theme as a custom background image.

Can I save my gradients?

Yes. The heart button keeps your gradients in this browser, no signup needed. With a free RAIKEN account (magic link, no password) your saved gradients will sync to your member area, and syncing into the Color Extractly plugin in Figma is on the roadmap.

How do I use these colors in Figma?

Color Extractly brings palettes, contrast checks, and design tokens straight into Figma. Paste any of the hex values from this page into the plugin to build palettes and variables from them.