Black & White CSS Gradient Generator

A clean black and white CSS gradient that fades from white through grey into black. Neutral and versatile, it works as a mask, an overlay or a minimalist background. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (90°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(90deg, #ffffff 0%, #9ca3af 50%, #111111 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(90deg, #ffffff 0%, #9ca3af 50%, #111111 100%);
}

About the black & white gradient

A black and white gradient is the most versatile blend there is, useful as a background, a photo overlay or a fade-to-transparent mask. This preset runs white to grey to black so you get an even, neutral ramp. Because grayscale has no hue, the interpolation space barely matters, though the position of the mid grey controls where the fade sits. Swap black for transparent to make an image mask, then copy the CSS or Tailwind v4 export.

The CSS for this gradient:

background: linear-gradient(90deg, #ffffff 0%, #9ca3af 50%, #111111 100%);

Frequently Asked Questions

Use background: linear-gradient(90deg, #ffffff 0%, #111111 100%);, optionally adding a mid grey stop to control where the fade sits. Start from the preset above and copy the CSS.

Replace the black stop with transparent, for example linear-gradient(#000 0%, transparent 100%), and layer it over an image. This gives a gradient overlay that darkens one edge while leaving the other clear.