Make a grainy gradient in your browser: pick colours, set the grain from 0 to 1, and export a PNG or a looping MP4 without a watermark, or copy it as a React component. The grain is drawn live, per pixel, on the GPU.
Free presets with heavy grain. Open one to tune it and export.
What you can make, what you get out, and how the grain is drawn.
Open the generator and start from one of the grainy presets below, or pick the Grain style. Set the colours, background, speed, scale, warp and blur, then move the Grain slider. It runs from 0 to 1: 0.1 to 0.3 gives a matte, printed finish, and 0.5 and up looks like fast film.
The Grain slider works on every style in the editor, not only Grain. A smooth mesh, an aurora or a radial glow with grain added stops looking like a screen and starts looking like a photograph.
Copy a share link, copy the gradient as React code, or copy one shadcn command that installs it as a component in your project. Tuning and share links need no account; copying code or exporting needs a free one.
Export a still PNG up to 1920px, or an MP4 of up to 10 seconds at 1080p and 60 fps, free and without a watermark. Pro goes up to 16K stills and 6K video. Video export needs WebCodecs, which Chrome and Edge support today.
The grain isn't a noise image laid over the top. The shader draws new grain for every pixel on every frame, so it stays sharp at any export size and never shows a repeating tile.
Each grain value is triangular noise, so most pixels move a little and few move a lot. It's strongest in the midtones and fades toward black and white, the way film grain does. The noise is seeded by the frame number and repeats when the loop does, so live grain loops without a seam. In an MP4 export the grain moves every frame too, unless that would push the file past its size budget: then the export holds one grain pattern still while the gradient keeps moving.
Grain is the most expensive thing to put in a video. Noise changes every pixel on every frame, which compression can't predict: in our test, the same 10-second 1080p clip grew from 1.09 MB without grain to 74.4 MB with visible grain. Background video vs animated gradient has the full numbers.
For a website, ship the gradient as a component instead. The grain then costs a few arithmetic operations per pixel and nothing to download.
The same grainy gradient, live in a React or Next.js page.
pnpm dlx shadcn@latest add https://gradients.sh/r/grain-gradient.jsonThen render <GrainGradient className="h-[480px]" grain={0.6} /> behind your content. The Grain Gradient docs list every prop, and how to add film grain to a gradient covers the CSS-only version and the shader behind it.