How do I add grain to a CSS gradient?

Layer a small noise texture over the gradient at low opacity. The tool generates the noise and writes both layers into the CSS for you.

Why does grain fix banding?

Large, gentle gradients show visible steps on 8-bit screens. Noise breaks those steps up so the eye reads a smooth ramp.

Grain gradient generator

A layer of film grain gives a gradient texture and dithers away banding. Set the amount, then copy the CSS.

linear gradient

Click the bar to add a stop

3 stops · eased

Code

background-image: linear-gradient(160deg, #2a2f6b 0%, #30316c 6.5%, #40376e 13%, #583f71 19.5%, #754675 26%, #924d77 32.5%, #ab5279 39%, #bc547a 45.5%, #c2557a 52%, #c4597a 58%, #ca6379 64%, #d37378 70%, #dd8575 76%, #e79671 82%, #efa56c 88%, #f5af68 94%, #f7b267 100%);

/* Grain, to kill the banding a wide gradient shows on a cheap panel. */
position: relative;

&::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");
}

Easing is applied by baking 8 stops per segment, so this snippet needs no modern colour support at all.

Shape

Angle160°

Selected stop

1 of 3

Position0%

Opacity100%

Blending

Interpolation

Easing

Easing is why a fade to transparent stops looking like it ends early. Extra stops are computed along the curve.

Smoothness8 per segment

Grain35%

A little noise breaks up the banding a wide gradient shows on an 8-bit display.

Perceptually even. The best default for two colors far apart.

Presets

Questions

How do I add grain to a CSS gradient?: Layer a small noise texture over the gradient at low opacity. The tool generates the noise and writes both layers into the CSS for you.
Why does grain fix banding?: Large, gentle gradients show visible steps on 8-bit screens. Noise breaks those steps up so the eye reads a smooth ramp.

Gradient Generator OKLab gradient generator OKLCH gradient generator Radial gradient generator Conic gradient generator

Next steps

The tools that usually come after this one.

See every stage

AssetsOG Image GeneratorDesign the image every share shows.SystemMesh Gradient EditorMove the points. Watch it move.AssetsQR Code GeneratorStyled QR codes that still scan.

Pairs with

The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.

Mesh Gradient EditorWhen two stops are not enough.Color PickerPull stops out of an image.Component librariesWhere these tokens live.