1. Solid Black Background
Pure Black
background-color: #000;
/* or */
background-color: rgb(0, 0, 0);
/* or */
background-color: black;Last reviewed on 2026-04-30
Master CSS background properties with live examples, code snippets, and professional techniques for creating stunning black backgrounds and dark themes.
background: #000;
background: linear-gradient(135deg, #000 0%, #111 100%);
background-image: url('pattern.svg');
background-size: cover;
background-position: center;background-color: #000;
/* or */
background-color: rgb(0, 0, 0);
/* or */
background-color: black;background: linear-gradient(180deg, #000 0%, #333 100%);
/* Radial gradient */
background: radial-gradient(circle, #111 0%, #000 100%);background-color: #000;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255,255,255,.05) 10px,
rgba(255,255,255,.05) 20px
);background:
linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('image.jpg');
background-size: cover;
background-position: center;@keyframes darkPulse {
0%, 100% { background-color: #000; }
50% { background-color: #111; }
}
background-color: #000;
animation: darkPulse 3s ease-in-out infinite;Explore advanced black background techniques used by top designers and developers. Each example includes production-ready CSS code.
body {
background-color: #000;
color: #fff;
font-family: -apple-system, sans-serif;
}
.content {
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}.gradient-mesh {
background-color: #000;
background-image:
radial-gradient(at 20% 80%, #1a1a1a 0%, transparent 50%),
radial-gradient(at 80% 20%, #0a0a0a 0%, transparent 50%),
radial-gradient(at 40% 40%, #111 0%, transparent 50%);
}.noise-black {
background-color: #000;
position: relative;
}
.noise-black::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-conic-gradient(#000 0%, #111 5%, #000 10%);
opacity: 0.1;
mix-blend-mode: multiply;
}Discover stunning color pairings with black backgrounds. Each combination is carefully selected for maximum visual impact and professional appeal.
Luxurious and elegant
Bold and energetic
Professional and modern
Tech-savvy and fresh
Creative and mysterious
Explore the complete collection
Sets the background color of an element
background-color: #000;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
background-color: hsl(0, 0%, 0%);
background-color: transparent;Sets one or more background images
background-image: url('image.jpg');
background-image: linear-gradient(#000, #333);
background-image: radial-gradient(circle, #000, #111);
background-image: url('image.jpg'), linear-gradient(#000, #333);Specifies the size of background images
background-size: cover;
background-size: contain;
background-size: 100% 100%;
background-size: 200px 100px;
background-size: auto;Sets the starting position of a background image
background-position: center;
background-position: top left;
background-position: 50% 50%;
background-position: 10px 20px;
background-position: right 10px bottom 20px;Sets how background images are repeated
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space round;Sets all background properties in one declaration
background: #000;
background: url('image.jpg') center/cover no-repeat;
background: linear-gradient(#000, #333), url('image.jpg');
background: #000 url('pattern.svg') repeat-x;Layer multiple backgrounds for complex effects
.multiple-backgrounds {
background:
linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%),
radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
#000;
}Create patterns without images using pure CSS
.css-pattern {
background-color: #000;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px),
repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.03) 35px, rgba(255,255,255,.03) 70px);
}Create themeable backgrounds using custom properties
:root {
--bg-primary: #000;
--bg-secondary: #111;
--bg-accent: #222;
}
.dynamic-background {
background:
linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
transition: background 0.3s ease;
}Create custom CSS backgrounds with our interactive generator. Adjust properties and see live results.
background-color: #000000;A short tour of the patterns that come up again and again in production CSS, and where on the site you can read more about each.
Dark linear or radial gradients give a hero section depth without large image downloads. The CSS gradients guide walks through the syntax, blending stops, and how to keep gradients from banding.
A near-black card with a CSS-only pattern overlay reads as premium without an image request. See the techniques in CSS background patterns and multiple backgrounds.
Looping gradients, parallax layers, and SVG motion make a page feel alive when used sparingly. Compare approaches in animated backgrounds and parallax scrolling.
Stacking a translucent dark gradient on a hero photo keeps text readable across many image variations. The pattern is covered in background blend modes and background-size: cover.
The most straightforward way is using background-color: #000; or background-color: black;. For better browser support and consistency, hexadecimal values are recommended.
Use CSS gradients: background: linear-gradient(to bottom, #000, #333); for linear gradients or background: radial-gradient(circle, #111, #000); for radial gradients.
Yes! Use multiple backgrounds: background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('image.jpg'); to create overlays.
Solid colors are the most performant. Avoid large background images when possible, use CSS gradients instead of images, and leverage CSS patterns for textures.
Complete guide to CSS background-color property
Advanced techniques for black backgrounds
Working with images in CSS backgrounds
Create stunning gradient backgrounds
Interactive tool for creating backgrounds
Quick reference for all properties
Contrast, legibility, and WCAG on dark surfaces
LCP, image formats, and paint cost
Switch backgrounds with the user's system theme
Debugging the most common background issues