Linear · radial · conic · grain

Gradients with a little grain.

Pick your colours, set the angle and add film grain if you like. Copy the CSS or Tailwind class, or download it as an image for wallpapers and posts.

Angle 135°

Grain 25%

Presets

How is the grain added?: It's an SVG noise texture laid over the gradient with the overlay blend mode. The CSS code includes it as a second background, so it works without any image files.
Why add grain at all?: Smooth gradients can show stripes (banding) on some screens. A little grain hides them and gives a printed, film-like feel.
Can I use it in Tailwind?: Yes. Pick the Tailwind tab for a class you can paste straight into your HTML. It uses Tailwind's arbitrary value syntax, so no config is needed.
Where do I find colours that go together?: Use the palette generator or pull colours from a picture with palette from photo.