Blur and grain are scaled from the preview width up to the output size, so what you see on screen is what comes out — just larger.
What it actually does
A gradient like this is nothing more than coloured shapes, blurred hard and stacked. Soft and Dark cut a polygon per colour and crush it with filter: blur(); Bold uses CSS gradients directly. Jittering the polygon vertices is what kills the giveaway look of four circles in a row.
The grain is SVG feTurbulence, desaturated and laid over the top with mix-blend-mode. It is also the cheapest fix for banding — those visible steps across a wide gradient largely disappear under it.
Export is not a screenshot. The same parameters are redrawn on a Canvas, following the CSS ordering exactly: blur happens in the element's own coordinates before scale and rotation, the first background layer sits in front, blend modes composite inside the scene. Preview and output stay in step — measured under 2/255 across every preset. And because it draws at the size you asked for, a 4K export stays sharp.
- Grain at export: "Match preview" scales the grain along with everything else. If the image will be viewed at 1:1 — a wallpaper, say — "Native" keeps the speckle fine and reads more like film grain.
- Copy CSS: for when you want the code rather than a file. You get a
<div>you can paste as is. - No upload: colour maths, drawing and encoding all happen locally. What you make never leaves the tab.