Gradients Studio

Drawn for 12:00 pm

Stop generating.
Start creating.

Make your launch film yourself, scene by scene, on the beat of your song. The making is the joyful part, so Gradients Studio keeps it in your hands.

Start a filmOr make a background

5 free exports a month · Films and backgrounds · No card

Gradients Studio Film

The making is the point

Agents are learning to finish the work for you. With creative work, the finished file was never the point. A film someone clearly directed beats a thousand generated clips, even if the clips get more views.

  • 01

    Song first

    Film hears your song's tempo, its key and where it lifts and drops, so every scene lands on a beat.

  • 02

    Every scene by hand

    Type that arrives letter by letter, shapes, patterns, your logo, god rays and transitions. Each one stays a layer you can open and change.

  • 03

    Sound that follows motion

    Each word, pop and swipe gets its own sound, in your song's key. Export an MP4 when it feels right, or just the sound.

Coming next: a crew. They'll ask what you're making, lay a story across your timeline, build a hard shot when you ask, and run a sound pass with you, scene by scene. You stay the director.

Start a film

Ship it.

Scene 3 · beat 14

Mesh gradient backgrounds for the work you ship

Launch posts, heroes, App Store shots and decks, each on a gradient straight from the studio.

A white launch announcement card on a periwinkle gradient dithered into star and diamond glyphs
Open in studio

LinkedIn and X · 1728 × 2160

Launching soon? Paste your link for a free launch kit: your Product Hunt gallery image, link preview and five more posters, in your brand.

Need an exact size? Backgrounds for a LinkedIn banner, X header, YouTube banner, App Store header and 17 more places, with the safe zones marked.

A polaroid of the Nasdaq tower in Times Square showing a green gradient congratulating reAlpha on its acquisition of Prevu

Seen in Times Square

The gradient on the Nasdaq tower, for reAlpha's acquisition of Prevu, was made in Gradients Studio.

By reAlpha's design team. Rendered grain is what keeps a gradient clean at the size of a building.

Read the story

Start from a palette

Pick one to open it in the studio, then make it yours.

Want a finished image instead? Free gradient wallpapers, or browse by look: grainy, pixel, dither, aurora, blurry.

An app in ChatGPT

Make one inside ChatGPT

Gradients Studio is an app in ChatGPT. Describe the background you need and pick from real renders, not a guess from an image model.

  1. 01

    Ask for it in plain words

    Type @Gradients Studio and say where it's going: “a calm, grainy hero for our launch”.

  2. 02

    Pick one of six, tweak it

    Six live variations appear in the chat. Pick one, then ask for warmer, darker or more grain.

  3. 03

    Approve and download

    Every size you need in one go: hero, OG image, X, LinkedIn, slide. Designing needs no account.

Open in ChatGPT

Coding in Claude Code or Cursor? Add it over MCP.

A violet and mint rays gradient behind a ChatGPT conversation
@Gradients Studio a calm, grainy hero for our launch

Why it looks designed

Gradients Studio is a mesh gradient generator that renders grain into the image itself, so a soft gradient stays smooth at 4K instead of breaking into bands.

An orange, pink, gold and violet gradient with grain: the colours blend smoothly with no visible bandsNo grainGrain

Drag the handle. Same render, same tones; only the grain differs.

Grain is rendered, not pasted
Drawn into the gradient at export resolution, so it survives JPEG compression, scaling and print.
Preview and file match
Blur is defined against the 4K export. What you tune on a laptop is what lands on the monitor.
Every size from one design
Hero, OG card, story, slide, App Store shot: the same gradient, re-rendered for each frame.

How it compares

Pick the tool for the job. If the page needs live CSS, use a CSS tool; for an image that has to hold up at full size, render it.

Question
Gradients Studio
CSS gradient tools
Figma mesh plugins
AI image generators
Grain rendered into the file
Yes: At export size
Partly: An overlay, if any
Partly: Depends on the plugin
Partly: Not controllable
Smooth on a 4K monitor
Yes: Grain hides the bands
No: Bands in dark blurs
Partly: Varies
Partly: Varies
Pixel and dither finishes
Yes: Built in
No: Rarely
Partly: Separate plugins
Partly: By prompt, never exact
The same result again later
Yes: From a saved link
Yes: Yes
Yes: Yes
No: A new image each time
Inside ChatGPT and coding agents
Yes: ChatGPT app and MCP
No: No
No: No
Partly: ChatGPT, as images
Live CSS for a web page
No: Images only
Yes: That's what they do
No: No
No: No

Want names? See ten mesh gradient generators compared, with what each one is best at.

Free to start. Pro when you need more.

Pro renews monthly or yearly until you cancel. Commercial use is on every plan, and exports count the same in the studio, in ChatGPT and over MCP.

Free
$0

no card

  • 5 4K exports a month, no watermark
  • Every style, color, blur and grain control
  • 3 saved palettes
  • The ChatGPT app and MCP, same pool
Start for free
Pro
Save 47%
$8/mo

billed yearly · save 47%

  • Unlimited 4K exports, in the studio, ChatGPT and MCP
  • Pixel and dither finishes
  • 50 saved palettes
  • Cancel any time
Get Pro

Cancel any time from Manage billing in the studio. Refunds within 14 days if you haven't exported.

Questions

What is Gradients Studio Film?
A motion studio in your browser for launch films and product videos. You pick a song first, then build scenes on its beats with text, shapes, images, patterns and effects, and Film gives each moving part its own sound, in the song's key. Export MP4 at 1080p free (5 exports a month, with a small credit) or up to 4K60 on Pro.
What is the best mesh gradient generator for website backgrounds?
For a background image that has to look clean on a big monitor, use one that renders grain into the file at full size. Gradients Studio does that: four styles (blobs, stripes, clouds, rays), grain, pixel and dither finishes, and 4K export with no watermark, with 5 free exports a month. If your page needs live CSS rather than an image, a CSS gradient tool is the better fit.
What is a mesh gradient?
A gradient made from several color points spread across a canvas and blurred together, instead of one straight fade between two colors. It gives the soft, glowing look you see on modern app and product sites.
How do I make a grainy gradient without banding?
Add grain at the size you export, not after. Smooth dark blurs step between shades and show color bands on large screens; grain drawn into the 4K render scatters those steps into texture. In Gradients Studio, pick a palette, leave Grain on (0.2 is a good start) and export.
Can ChatGPT make a mesh gradient background?
Yes, with the Gradients Studio app in ChatGPT. Type @Gradients Studio and describe the background; it shows six live variations to pick and tweak, then exports the sizes you need. Unlike an image generator, the result is a real render you can reopen and change exactly, later.
Is Gradients Studio free?
Yes. Every style and every color, blur and grain control is free, with 5 full-resolution 4K exports a month and 3 saved palettes. No watermark, no card. Pixel and dither finishes preview free and export on Pro.
What size should a gradient be for an OG image or a website hero?
An OG or link-preview image is 1.91:1 (1200×630 is the usual minimum); a full-width hero is 16:9. Gradients Studio exports both at 4K: landscape files are 3840 pixels wide, portrait and square are 2160 pixels tall, so they stay sharp on retina screens.
Is Pro a subscription?
Yes. Pro is $15 a month or $96 a year ($8 a month, billed yearly). It renews until you cancel, and you can cancel any time from Manage billing in the studio. When it ends you go back to the free plan and keep every palette you saved.
Can I use the exports commercially?
Yes. Anything you export, on any plan, is yours to use in personal and client work, including products you sell.
What are the pixel and dither finishes?
Pixel turns the gradient into blocks of its own palette, dithered with blue noise, the look of early game art and retro launch videos. Dither reduces it to a pattern of dots or glyphs that reads as texture. Both render at export size with size and density dials.
Does it work with Figma?
Yes. Export the JPEG and place it as an image fill or a frame background. Exports are 4K, so they stay sharp in 2x exports from Figma. Keep the studio link in the layer description to reopen the exact gradient later.
Can Claude Code or Cursor make these?
Yes. Gradients Studio is an MCP server, so Claude Code, Cursor, Claude Desktop and any MCP client can render, preview and export gradients from a prompt and drop the files into your repo. Previews are free; exports share the same pool as the studio.
Do you export CSS or SVG?
No. The studio makes images. For a CSS gradient on a live page, use a CSS tool; bring the image here for the places an image belongs: heroes, social cards, slides, screenshots and covers.

Updated