Black Background in CSS & HTML: Full Page, Sections, Gradients

The whole page

html, body {
  background-color: #000;   /* or a near-black such as #0a0a0a */
  color: #e8e8e8;
  margin: 0;
}

Set the colour on html as well as body. If only body is set and the content is shorter than the window, some layouts show a white strip at the bottom or during overscroll on phones. Always set a light text colour at the same time — the browser default is black text, which disappears on a black background.

Without a stylesheet

<body style="background-color: #000; color: #e8e8e8;">

The old <body bgcolor="black"> attribute still renders, but it is obsolete in HTML and cannot be overridden cleanly; use the style attribute or a stylesheet.

Tell the browser the page is dark

<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#000000">

:root { color-scheme: dark; }

color-scheme: dark makes the browser draw scrollbars, text inputs, checkboxes and select menus in their dark style, and uses a dark default canvas before your CSS loads — that is what removes the white flash on navigation. theme-color tints the browser toolbar on mobile.

A full-height black section

.hero {
  min-height: 100vh;
  min-height: 100dvh;       /* ignores the mobile browser toolbar */
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 2rem;
}

The first min-height line is a fallback for browsers without dynamic viewport units. For a black band between light sections, drop the height rules and add generous vertical padding; the web design guide covers when a single black section helps a light page and when it breaks the reading flow.

Black to dark grey gradient

.fade {
  background: linear-gradient(180deg, #000000 0%, #2a2a2a 100%);
}

Keep the lighter end below about #333 if text sits on top. Dark gradients are prone to visible banding; spreading the change over a large area, adding a faint noise layer, or using a colour stop with a midpoint hint helps. Angles, stop placement and banding fixes are covered in depth in CSS gradients on black and grain and banding.

Radial black background

.spotlight {
  background: radial-gradient(ellipse at center, #1f1f1f 0%, #000000 70%);
}

This lights the centre and falls off to pure black at the edges — the CSS equivalent of the generator's Radial Gradient type with a vignette. Move the light with at 50% 30%, or use circle instead of ellipse for a round falloff on wide screens. The vignette guide explains how strong the falloff should be.

Black overlay on a background image

.photo-hero {
  background:
    linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%)),
    url("photo.jpg") center / cover no-repeat;
  color: #fff;
}

The semi-transparent black layer darkens the photo so white text stays readable. Raise the alpha for busy photos; 50–70% is a typical range.

Patterned black backgrounds

For stars, noise, carbon fibre or bokeh, use the black background generator: its Show CSS button gives you the base colour and gradient, and Export to PNG produces the textured image to use as background-image. Pair the image with a matching background-color so the page is already black while the image loads.

Tailwind CSS

<body class="bg-black text-neutral-200">
<section class="min-h-dvh bg-neutral-950 text-white">

bg-black is #000; bg-neutral-950 is a near-black that works well for long-form content.

Checklist

Background set on both html and body.
Text colour set explicitly; body text contrast at least 4.5:1 (see the black hex codes table for ratios).
color-scheme: dark so form controls and scrollbars match.
Link colour lightened for dark backgrounds (for example #4ea3ff rather than #0066cc).
Images with transparent areas checked against black — dark logos may need a light version.

Last reviewed on 3 October 2026.

← Back to generator