FEATURED

Mesh Gradient Generator

shades
tints
analogous
complementary
double-split-complementary
rectangle
split-complementary
tetradic
triadic
color
harmony
blend
blur

Create flawless mesh gradients

Achieve the sophisticated look of a multi-layered mesh gradient without the complex code. This tool lets you visually build and fine-tune intricate color gradients, add depth with noise and blur effects, and grab the clean CSS code with a single click.

How does it work?

Begin by placing and selecting your color points on the canvas. Drag them around to shape the gradient's flow and color interactions in real-time. Use the powerful controls to refine your artwork: change the blend mode, increase the blur for a softer look, or add a subtle noise effect for texture. When your masterpiece is complete, simply copy the generated CSS code to use in your project.

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

Copy CSS

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

Builded gradient

Loading syntax highlighting...

HDR colors

Loading syntax highlighting...

Interpolation

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

Interpolation settings

Hue interpolation is only available for HSL, HWB, LCH, and OKLCH.

Preview

Download gradient image

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

Formats

png Presets

PRO

4K

3840x2160
PRO

Ultrawide Desktop

3440x1440
PRO

Widescreen Monitor

2560x1440
PRO

1080p

1920x1080
PRO

iPhone 16 Plus

1290x2796
PRO

iPhone 16 Pro

1179x2556
PRO

Pixel 9 Pro

1344x2992
Free

Mobile Portrait

1080x1920
Free

Instagram Square

1080x1080
Free

Instagram Portrait

1080x1350
Free

Instagram Landscape

1080x566
Free

Instagram Story

1080x1920
Free

Twitter Header

1500x500
Free

Profile Picture

1080x1080
Free

Google Slides (Standard)

960x540
Free

A4 Paper (Print)

2480x3508
Free

Letter Paper (Print)

2550x3300

Contrast Checker

Check accessibility compliance of your palette colors.

Color Analysis

#c11ceb

AA - 4.53

#6f19b5

AAA - 8.46

#25007a

AAA - 15.44

Contrast Level Explanations

Click on a color block to open the full contrast checker. Levels are based on WCAG 2.1 guidelines.

AAA

Perfect ≥ 7:1

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

AA

Good ≥ 4.5:1

Meets standard requirements for most users and situations.

Fail

Poor < 4.5:1

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.

Mesh Generation

  • Generate new mesh

    Space
  • Add color point

    Shift + +
  • Remove color point

    Shift + -

Navigation & Views

  • Show tips & shortcuts

    F1
  • Toggle fullscreen

    Shift + F
  • Undo changes

    Ctrl + Z
  • Redo changes

    Ctrl + Shift + Z

Pro Tips

  • Drag color points around the canvas to create unique mesh patterns and color flows

  • Use different blend modes to create artistic effects and color interactions

  • Add blur effects to soften the mesh and create more organic-looking gradients

  • Combine noise texture with mesh gradients for added visual depth and complexity

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/250 characters

Optional

Some basic browser environment data is included to help us reproduce issues.

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, downloadable app token files, unlimited collections, wallpapers, and an ad-free experience.


  • AI tools for color insights and faster creation

  • Export a polished Branding Kit as PDF

  • Export Light/Dark themes to CSS and CSV

  • Download app color token files for Android, Flutter, Swift, and .NET MAUI

  • App gradient code (Android, Flutter, Swift)

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

  • Unlimited collections

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

  • Download colors as PNG, JPG, or SVG

  • Ad‑free experience

PWA Prompt