CSS Gradient Generator

Black gradients for dark backgrounds, hero sections and dark mode designs: pure black into charcoal, or black with a subtle hint of color. A slight gradient keeps a large dark area from looking flat. Hover a gradient to see its colors, or click it to open it in the generator and customize it.

Black Gradients

FAQ

How do I make a black gradient in CSS?

Go from pure black to a dark grey or a very dark tinted color, for example linear-gradient(135deg, #090909 0%, #231C37 50%, #030303 100%). Keep the difference small for a subtle background, or larger for more depth.

Why use a black gradient instead of plain black?

Large areas of flat black can look heavy on screen. A gentle gradient adds depth and makes the page feel more polished, while still reading as black.