Dark CSS Gradient Generator

A moody dark CSS gradient that shifts between deep slate, near-black navy and charcoal. Perfect as a dark-mode background that still has subtle depth. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (145°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 145deg, #1e293b 0%, #0f172a 50%, #020617 100%);

Tailwind v4 (@theme)

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

@theme {
  --gradient-brand: linear-gradient(in oklch 145deg, #1e293b 0%, #0f172a 50%, #020617 100%);
}

About the dark gradient

Dark gradients make dark-mode backgrounds feel intentional instead of flat black by adding a faint shift between very dark tones. This preset blends a deep slate, a near-black navy and a charcoal so there is quiet depth without ever getting bright. Keep the stops close in lightness so the effect stays subtle, and pair it with a light or neon accent for contrast. Copy the CSS or Tailwind v4 @theme token from the generator.

The CSS for this gradient:

background: linear-gradient(in oklch 145deg, #1e293b 0%, #0f172a 50%, #020617 100%);

Frequently Asked Questions

Blend a few very dark tones that differ slightly in lightness, such as a deep slate (#1e293b), a near-black navy (#0f172a) and an almost-black (#020617). The small shift gives depth while staying dark enough for dark mode.

Keep the stops close in lightness but let the hue drift a little, for example slate toward navy. A radial gradient with a slightly lighter center also adds a subtle glow without brightening the whole background.