Mesh Gradient Generator

shades
tints
analogous
complementary
double-split-complementary
rectangle
split-complementary
tetradic
triadic

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.

Web Code

Quick access to CSS, SCSS, & Tailwind code for web development.

Builded gradient

Loading syntax highlighting...

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

Export mesh gradient

Choose an export category, then select the format that matches your workflow.

Export categories

Image formats

jpeg presets

4K

PRO
3840x2160

Best for landscape layouts.

Ultrawide Desktop

PRO
3440x1440

Best for landscape layouts.

Widescreen Monitor

PRO
2560x1440

Best for landscape layouts.

1080p

PRO
1920x1080

Best for landscape layouts.

iPhone 16 Plus

PRO
1290x2796

Best for portrait layouts.

iPhone 16 Pro

PRO
1179x2556

Best for portrait layouts.

Pixel 9 Pro

PRO
1344x2992

Best for portrait layouts.

Mobile Portrait

Free
1080x1920

Best for portrait layouts.

Instagram Square

Free
1080x1080

Best for square layouts.

Instagram Portrait

Free
1080x1350

Best for portrait layouts.

Instagram Landscape

Free
1080x566

Best for landscape layouts.

Instagram Story

Free
1080x1920

Best for portrait layouts.

Twitter Header

Free
1500x500

Best for landscape layouts.

Profile Picture

Free
1080x1080

Best for square layouts.

Google Slides (Standard)

Free
960x540

Best for landscape layouts.

A4 Paper (Print)

Free
2480x3508

Best for portrait layouts.

Letter Paper (Print)

Free
2550x3300

Best for portrait layouts.

Contrast Checker

Check accessibility compliance of your palette colors.

Contrast Checker Explanations

Live APCA (WCAG 3 draft) and WCAG 2.1 contrast calculations comparing selected text color against surface colors.

Body Pass

Lc ≥ 60 · ≥ 4.5:1

Large Pass

Lc ≥ 45 · ≥ 3.0:1

Fail

Below thresholds

#c11ceb

AA - 4.53

Lc -75

#6f19b5

AAA - 8.46

Lc -92

#25007a

AAA - 15.44

Lc -104

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.

Colorffy Logo

Create your Colorffy account

Create. Explore. Build. Check.

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


  • Generate color palettes with AI

  • Find assets using AI Search

  • Export polished Branding Kits (PDF)

  • Export Light/Dark themes

  • Export platform-native app tokens

  • Generate native gradient codes

  • Download 4K & mobile wallpapers

  • Save unlimited collections

  • Export to Web code

  • Enjoy an ad-free experience

PWA Prompt