Extract from image

CSS gradient generator Keep your gradients vivid

Start from

From the makers of Design Token Studio for Figma →

Your library

Keep gradients here and return to them anytime.

Color ramps

Keep colors from this gradient, or save a ramp from the gallery below.

Use on other devices

Saved in this browser. Sign in with your email to sync across devices and with Design Token Studio in Figma. No password needed.

Sign in

Choose a starting point

Pick the job. The editor opens with a type, angle and colors that fit it.

Need a spark?

Hand-picked gradients and color ramps from Design Token Studio, formerly Color Extractly. Pick a gradient to load it into the editor, or 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

Export and share

Copy it as code, send it as a link, take it into Figma.

  • Share link

    The whole gradient in one URL. Opens without an account.

  • Figma

    Paste it as a vector. For variables, Design Token Studio opens your library inside Figma.

  • Images

    PNG, WebP or JPG up to 3840 px, and SVG as a vector for linear and radial.

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. Switch the editor between sRGB and OKLCH 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. Save keeps a gradient in this browser, no signup needed. Sign in with your email (no password) and your library follows you to every device and into Design Token Studio in Figma, under Inspiration, Your Storage.

How do I use these colors in Figma?

Copy for Figma puts the gradient on your clipboard as a vector you paste onto the canvas. For variables and styles, Design Token Studio (formerly Color Extractly) opens your synced library inside Figma and turns its colors into variables and design tokens.