FEATURED

Color Gradient Generator

shades
tints
analogous
complementary
double-split-complementary
rectangle
split-complementary
tetradic
triadic
color
type
angle
harmony

Build your perfect gradient with ease

Quickly create perfectly harmonized color combinations and move seamlessly from creative vision to practical implementation. This tool helps you discover beautiful color schemes and instantly get the code in your preferred format, including CSS variables, SCSS, and Tailwind CSS.

How does it work?

Start by selecting the colors for your multi-step gradient. Then, use the advanced controls to perfect your design: change the gradient type (linear, radial, or conic), adjust the angle, fine-tune the color harmony method, and define the number of steps for smoother interpolation. When your gradient is flawless, instantly copy the generated code in standard CSS, SCSS, or Tailwind format.

AI-generated content can make mistakes, so double-check it.

Copy CSS

Get CSS, SCSS, & Tailwind code for web development.

Custom generated

Loading syntax highlighting...

HDR color space

HDR colors OKLAB

Loading syntax highlighting...

Fallback colors

Loading syntax highlighting...

Interpolation

Interpolate between two colors to create a smooth-looking color palette.

Preview

Download gradient image

Choose the perfect size and format for your image wallpaper or background.

Image formats

Image sizes

Contrast Checker

Check accessibility compliance of your palette colors.

#c11ceb

AA - 4.53

#6f19b5

AAA - 8.46

#25007a

AAA - 15.44

Click on a color block to check detailed contrast information and see if it meets accessibility standards.

AAA

Perfect accessibility. Easy to read for everyone, including people with visual impairments.

AA

Good accessibility. Meets standard requirements for most users and situations.

Fail

Poor contrast. Text may be difficult to read, especially for people with visual challenges.

Tips & Keyboard shortcuts

Learn how to use the tools effectively with these tips and shortcuts.

Gradient Generation

  • Generate new gradient

    Space

  • Add color

    Shift + +

  • Remove color

    Shift + -

Navigation & Views

  • Show tips & shortcuts

    F1

  • Toggle fullscreen

    Shift + F

  • Undo changes

    Ctrl + Z

  • Redo changes

    Ctrl + Shift + Z

Pro Tips

  • Use color adjustments to fine-tune saturation, lightness, and contrast of your entire gradient

  • Check contrast ratios to ensure your gradient colors meet accessibility guidelines

  • Use fullscreen mode to better visualize how your gradient looks at different sizes

Submit feedback

We'd love to hear from you, tell us what you think about Colorffy, and what we can improve.

What's your suggestion? 💡

0/200 characters

Optional

Automatically detected to help us understand context

Create your free account

Sign up to save and like your color palettes, gradients, and more.

Sign up with

or

Already have an account? Log in

By signing up, you agree to our Terms of Service and Privacy Policy

Upgrade to Pro and build faster.

Trusted by designers and developers around the world.

.css.csv.scss.json.pdf.jpg.png.svgtailwindstyle dictionarywallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create faster. Export anywhere.

Unlock advanced exports, app tokens, unlimited collections, wallpapers, and an ad‑free experience.

  • AI tools for color insights and faster creation

    New

  • Export a polished Branding Kit as PDF

    New

  • Export Light/Dark themes to CSS and CSV

    New

  • Generate app color tokens for Android, Flutter, Swift, and .NET MAUI

    New

  • App gradient code (Android, Flutter, Swift)

    New

  • One‑click wallpapers for desktop and mobile (4K, ultrawide, iPhone, Pixel, more)

    New

  • Unlimited collections

    New

  • Export color data to JSON, CSS, SCSS, Tailwind, Style Dictionary, and CSV

  • Download colors as PNG, JPG, or SVG

  • Ad‑free experience

PWA prompt