Black gradient: CSS code and dark backgrounds to download
This black gradient fades from charcoal gray (#434343) at the top to pure black (#000000) at the bottom. Copy the CSS or download a PNG for your screen. White text passes everywhere on it, at 9.89:1 on the gray and 21.00:1 on the black; black text does not.
background-color: #434343;
background-image: linear-gradient(180deg, #434343 0%, #000000 100%);Variations
Reversed
#000000 → #434343Softer
#858585 → #595959Deeper
#2C2C2C → #000000Radial glow
#434343 → #000000
On this page
A flat black background can look heavy and a little dead. Letting it rise out of a dark gray gives the surface some depth without adding any hue, which is why this kind of gradient shows up behind product shots, movie-style title cards, dark-mode headers and lock screens. This one has only two stops: a neutral charcoal (#434343) and pure black (#000000).
How the gradient is built
The CSS reads linear-gradient(180deg, #434343 0%, #000000 100%). An angle of 180° runs from the top edge to the bottom edge, so the lighter gray sits at the top and the page sinks into black as the reader scrolls. The plain background-color line above it is a fallback for software that ignores gradients.
Because red, green and blue are equal in both stops, nothing in the blend picks up a tint. The halfway color is #222222, a dark gray with no color cast. Dropping the angle to 90° makes the same fade run left to right, which suits wide banners.
CSS has no name for #434343. The closest names in the specification are darkslategray and its spelling twin darkslategrey (#2F4F4F), but they lean green, so they would look different on screen. The black end is exactly CSS black.
Text on a black gradient
Only light text works here. White measures 9.89:1 against the charcoal end and 21.00:1 against the black end, the highest ratio WCAG can produce, so it clears AA and AAA for body text from top to bottom. Black text measures 2.12:1 and 1.00:1, which fails everything. The same logic applies to thin gray text: a mid gray that looks fine on white can drop below 4.5:1 once it sits on the near-black part, so test any gray with the contrast checker.
Worked example
You are building the hero section for a photographer's portfolio, with a large name in white and a one-line tagline under it. Use the default 180° angle and put the name in the upper third, where the background is closest to #434343 and still gives 9.89:1. Set Download size to Desktop 1920 × 1080, press Download PNG, and use the file as a fallback image behind a slideshow. If the pure-black bottom edge feels too severe next to the photos, switch to the Softer variation, which mixes each stop 35% of the way to white and gives #858585 and #595959. White text weakens there, to 3.69:1 on the lighter gray and 7.00:1 on the darker one, so keep small text on the original stops and use the softer version for large headings only.
Tips for dark gradients
- Long, shallow fades between near-black grays can show faint stripes on some screens, because 8-bit color has only a limited number of steps. A slight noise texture in your design app hides it.
- The Radial glow variation puts the charcoal in the center and the black on the edges, a simple spotlight effect.
- For a colored version, see the blue to black gradient, and for a lighter dark theme try the gray palettes.