Black Gradient CSS Background — Free Generator, Copy-Paste Code

Black and dark gradients are workhorses of modern web design — hero overlays, dark mode cards, text-over-image treatments, and full-page backgrounds all use them. This guide covers the most useful dark gradient patterns and how to generate the exact code you need.

The Most Useful Black Gradient CSS Patterns

Black to transparent (overlay): linear-gradient(to top, rgba(0,0,0,0.85), transparent) — the standard image overlay. Place this over a photo to make white text readable at the bottom without blocking the image at the top.

Black to dark navy: linear-gradient(135deg, #000000, #0f172a) — subtle dark gradient that adds depth to full-page backgrounds without looking flat.

Dark to slightly lighter dark: linear-gradient(to bottom, #111111, #1e1e2e) — a barely-there gradient that breaks up a flat black background. Works well on dark-mode sidebar panels.

Black to dark colour: linear-gradient(135deg, #000000, #1a0533) — a fade from black to dark purple or dark blue. Gives depth to hero sections in dark-mode product pages.

Black to Transparent: The Image Overlay Standard

The most common use of a black gradient in web development is the image overlay. Place text over a photo and the text becomes unreadable. The solution: a black-to-transparent gradient layer between the image and the text.

Standard implementation:

position: relative;
background-image: url(image.jpg);
background-size: cover;

Then overlay with a pseudo-element or a child div:

background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);

The 60% controls how far the gradient rises. Adjust down for a more aggressive overlay, up for a subtler fade. Generate the exact opacity and stop positions in the CSS gradient generator — drag the stop markers to fine-tune before copying the final code.

Sell Custom Apparel — We Handle Printing & Free Shipping

Using Black Gradients in Dark Mode Designs

Pure black (#000000) backgrounds often look harsh and create "halo" effects around text on OLED screens. A subtle gradient from near-black to dark grey or dark blue reads as more refined:

• Page background: linear-gradient(to bottom, #0d0d0d, #1a1a2e)
• Card surface: linear-gradient(145deg, #1e1e1e, #2a2a2a)
• Sidebar panel: linear-gradient(to bottom, #111111, #0a0a0a)

The difference between a flat black and a near-black gradient is subtle — but it makes dark-mode interfaces feel designed rather than defaulted.

How to Generate a Black Gradient in the Free Tool

Open the CSS gradient generator. Set your first colour stop to black (#000000 or a near-black like #0d0d0d). For the second stop:

• Transparent overlay: drag the opacity slider to 0 instead of choosing a colour
• Dark colour fade: pick your target dark shade (navy, dark purple, dark green)
• Subtle depth: pick a very dark grey (like #1a1a1a)

Adjust the angle — to top for bottom-anchored image overlays, to bottom for top-heavy shadows, 135deg for diagonal backgrounds. The live preview updates instantly. Copy the CSS when it looks right.

Frequently Asked Questions

What is the CSS for a black to transparent gradient?

background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); — adjust the opacity (0.85) and direction to match your design.

Why does pure black look harsh as a background gradient?

Pure #000000 creates extreme contrast against most interface elements. Using a near-black like #0d0d0d or #111111 as your start point looks more refined and reduces eye strain.

Can I layer multiple dark gradients?

Yes. CSS supports multiple background layers separated by commas. Stack an image overlay gradient over a colour gradient: background: linear-gradient(to top, rgba(0,0,0,0.7), transparent), url(image.jpg) center/cover;