The :fullscreen pseudo-class matches an element that is currently in fullscreen mode. Use it to change background, size, or layout only while that element fills the screen.
CSS cannot turn fullscreen on by itself. A user gesture must call element.requestFullscreen() (or native video controls). Then your :fullscreen rules apply automatically.
Supported in modern Chromium, Firefox, and Safari, but MDN marks it as not fully Baseline across every widely used browser. Prefer feature detection for critical UI.
Old engines used :-webkit-full-screen and :-moz-full-screen. New code should use standard :fullscreen.
:fullscreen { /* styles */ }Often combined with an element or class: .panel:fullscreen, video:fullscreen.
:fullscreen is a state selector — it has no property values. Common patterns:
| Form | Description | Try it |
|---|---|---|
:fullscreen | Any element currently fullscreen | Try it |
.panel:fullscreen | Fullscreen styles for one panel class | Try it |
video:fullscreen | Style a video while it is fullscreen | Try it |
:fullscreen::backdrop | Style the layer behind the fullscreen element | Try it |
| exit styles | Normal styles return after exitFullscreen() | Try it |
| keyboard Escape | Users can leave fullscreen with Escape | Try it |
:fullscreenStyle the fullscreen state, then toggle it with JavaScript on a user click.
:fullscreen rule for the fullscreen look.element.requestFullscreen().document.exitFullscreen() (or let the user press Escape).::backdrop behind the fullscreen element.| Piece | Required? | Role |
|---|---|---|
:fullscreen rule | For styling | Applies only while the element is fullscreen |
requestFullscreen() | Yes (to enter) | Promotes the element; needs a user gesture |
exitFullscreen() | Optional | Leaves fullscreen from script (Escape also works) |
::backdrop | No | Colors the area behind the fullscreen element |
Simulate fullscreen styles in-page, or enter real fullscreen with a click. Real :fullscreen matching needs the Fullscreen API.
Each snippet focuses on :fullscreen. Try-it demos include a small toggle script so you can enter and exit fullscreen.
Change background and text when a div goes fullscreen.
.panel {
background: #dbeafe;
color: #1e3a8a;
}
.panel:fullscreen {
background: #1e3a8a;
color: #fff;
}.panel sets the normal look..panel:fullscreen overrides only in fullscreen.panel.requestFullscreen().exitFullscreen() restores normal styles.::backdropDim the area behind the fullscreen element.
.panel:fullscreen {
background: #0f172a;
color: #f8fafc;
}
.panel:fullscreen::backdrop {
background: rgba(15, 23, 42, 0.75);
}:fullscreen changes the panel itself.::backdrop paints outside that element.video:fullscreenVideos often use native fullscreen; CSS still styles that state.
video {
max-width: 100%;
background: #000;
}
video:fullscreen {
width: 100%;
height: 100%;
object-fit: contain;
}video:fullscreen matches only while the video is fullscreen.object-fit keep the picture readable.Most issues are gesture requirements, iframes, or confusing CSS with the API.
:fullscreen only styles an element that is already fullscreen via the API or media controls.
requestFullscreen() must run from a click or similar user action, not from automatic page load.
Embedded frames often need allow="fullscreen" or fullscreen may be blocked.
:-webkit-full-screen and :-moz-full-screen are legacy. Prefer :fullscreen for new stylesheets.
Escape leaves fullscreen. Design UI that still makes sense after exit.
:fullscreen is a browser CSS pseudo-class tied to the Fullscreen API. Node.js, Deno, and Bun do not apply it.
Supported in modern Chrome, Edge, Firefox, Safari, and Opera. Check current MDN compatibility for edge cases.
Bottom line: Use the standard :fullscreen selector in modern apps. Feature-detect requestFullscreen for critical flows. Not a server runtime API.
requestFullscreen() on a user gesture.::backdrop for the layer behind.One line: :fullscreen styles the fullscreen state; JavaScript (or media UI) enters that state.
Learn how to style a parent based on its descendants.
5 people found this page helpful