How to Create a Black Screen Web Page with HTML and CSS
Create a full-viewport black web page with a few lines of HTML and CSS, then learn responsive, accessible, theme-aware, and screenshot-ready variations.
The shortest reliable way to create a black screen webpage is to set the page background to black with CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Black screen</title>
<style>
body {
margin: 0;
min-height: 100vh;
background-color: #000;
}
</style>
</head>
<body>
</body>
</html>background-color: #000; applies black to the body. #000, #000000, and black represent the same color. The margin reset removes the browser’s default white border around the page, while min-height: 100vh makes the body at least as tall as the viewport. MDN defines background-color as the property that sets an element box’s background color.
1. Create the basic black page
- Create a file named
index.html. - Paste the complete document above.
- Open the file directly in a browser, or serve it from a local web server.
An empty body is valid for a blank screen. You do not need JavaScript, an image, a framework, or a gradient.
Why include the viewport tag?
The viewport declaration tells mobile browsers to use the device’s intended layout width. Without it, some mobile browsers use a wider initial containing block and scale the page down. See MDN’s viewport guide for the layout details.
2. Make the black area fill the viewport
For an empty page, min-height: 100vh is normally enough. If you need the root element and body to occupy the full viewport, use this version:
html,
body {
width: 100%;
min-height: 100%;
margin: 0;
}
body {
min-height: 100vh;
background: #000;
}Use 100dvh when the exact visible height should follow mobile browser controls as they expand and collapse:
body {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
background-color: #000;
}The first declaration provides a broadly supported fallback; the second uses the dynamic viewport unit where available.
3. Add content without losing contrast
Black is a background, so any text, controls, or icons placed on it need a readable foreground color. This example centers a message:
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #000;
color: #fff;
font-family: system-ui, sans-serif;
}
main {
padding: 2rem;
text-align: center;
}WCAG 2.2 Success Criterion 1.4.3 specifies a minimum contrast ratio of 4.5:1 for ordinary text and 3:1 for large text at Level AA, with stated exceptions. White on black has strong contrast, but verify any gray, colored, or translucent text you add with a contrast checker. Read the WCAG 2.2 specification for the complete criterion.
Respect reduced motion and focus visibility
A static black screen needs no animation. If you later add controls, keep keyboard focus visible:
:focus-visible {
outline: 3px solid #fff;
outline-offset: 4px;
}4. Choose fixed black or automatic dark mode
Use a fixed background when the design requirement is always black:
body {
background-color: #000;
color: #fff;
}Use prefers-color-scheme when the page should follow the user’s requested theme. MDN documents this media feature in its prefers-color-scheme reference:
:root {
color-scheme: light dark;
}
body {
margin: 0;
min-height: 100vh;
background: #fff;
color: #111;
}
@media (prefers-color-scheme: dark) {
body {
background: #000;
color: #fff;
}
}This is a different goal from a permanently black screen. Test both themes if you use the media query, including links, form fields, borders, and focus indicators.
5. Useful variations
Black screen with a centered loader
<body>
<main aria-label="Loading">
<div class="loader" aria-hidden="true"></div>
</main>
</body>
<style>
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #000;
}
.loader {
width: 2rem;
height: 2rem;
border: 3px solid #444;
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.loader { animation: none; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>Black screen with an image or video
body {
margin: 0;
min-height: 100vh;
background: #000;
}
video,
img {
display: block;
max-width: 100%;
}
video {
width: 100%;
height: 100vh;
object-fit: contain;
}Keep the black background on the body so unused space around an image or video remains black.
Black screen using a class
.black-screen {
min-height: 100vh;
margin: 0;
background-color: #000;
}
<body class="black-screen">
</body>A class is useful when only one route or component needs the treatment.
6. Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| A white strip remains around the page | The browser’s default body margin is still present | Add body { margin: 0; }. |
| Only the content area is black | The body has no viewport height and contains little content | Add min-height: 100vh or min-height: 100dvh. |
| The CSS appears as text | The stylesheet is outside a <style> element or has malformed HTML |
Put CSS inside <style> in <head>, or link a valid stylesheet with <link rel="stylesheet" href="styles.css">. |
| The page is gray rather than black | A later rule, inline style, or browser extension overrides the background | Inspect the body in DevTools and check which declaration wins. Remove the override before using !important. |
| Mobile content is tiny | The viewport meta tag is missing | Add <meta name="viewport" content="width=device-width, initial-scale=1">. |
| Text cannot be read | The foreground color is too close to black | Use a high-contrast color and verify it against WCAG thresholds. |
| Black does not reach behind a fixed child | The child establishes its own background or stacking context | Inspect computed backgrounds and set the intended ancestor or child background explicitly. |
7. Performance, reliability, and deployment
- A solid CSS color adds no network request and has negligible rendering cost.
- Removing unnecessary JavaScript and images makes the blank page more predictable, especially on slow connections.
- Keep the document’s character encoding and viewport metadata even when the body is empty.
- When publishing, deploy
index.htmlwith the correct MIME type and confirm that the server does not inject a light background or redirect to a different document. - Check desktop and mobile widths, browser zoom, forced colors, and dark-mode settings if the page contains content.
8. Capture the result with ScreenshotNeo
If you need a repeatable image of the finished page for documentation, visual regression checks, or social previews, ScreenshotNeo provides a website screenshot API. Its capture options include full-page shots, element selection, custom CSS and JavaScript, viewport and device settings, retina scale, waiting rules, and image formats.
Or skip the browser setup
Instead of installing and maintaining a browser automation script, call the API. See the ScreenshotNeo documentation for parameters and response details.
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://example.com/black-screen.html \
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={
"access_key": "YOUR_API_KEY",
"url": "https://example.com/black-screen.html",
},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com/black-screen.html'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('shot.webp', buffer);Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents such as Claude or Cursor take screenshots. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
9. FAQ
Can I make the page black with only HTML?
HTML alone does not express the page background color. Add CSS, either in a <style> element, an external stylesheet, or an inline style attribute.
Should I use background or background-color?
Both work for a solid color. background-color states the intent clearly and avoids changing unrelated background properties.
Do I need JavaScript for a black screen?
No. CSS is sufficient unless you need behavior such as toggling themes or reacting to user actions.
Why use min-height instead of height?
min-height fills a short viewport while allowing the page to grow naturally if content becomes taller. Use a fixed height only when clipping or exact viewport sizing is intentional.
