# Bootstrap 6 Backdrop
> Pick the layer behind a dialog or a drawer — a dark scrim, a translucent tint of the page, or nothing — from the markup.
## How it works
Every overlay that dims the page paints its native `::backdrop` from three tokens on `:root`: `--cui-backdrop-color`, `--cui-backdrop-opacity` and `--cui-backdrop-blur`. The colour and the opacity are mixed on the element, so either can be changed alone. The [dialog](https://coreui.io/bootstrap/docs/components/dialog/) keeps the root defaults — a dark scrim that deepens in the dark colour scheme — and the [drawer](https://coreui.io/bootstrap/docs/components/drawer/) tints the page instead.
The backdrop helpers set the colour and the opacity on the overlay element itself, so one instance can take the other look without touching `:root`:
| Class | Backdrop |
| --- | --- |
| `.backdrop-scrim` | Black at 50% (65% in the dark scheme) — the dialog's default |
| `.backdrop-translucent` | The page colour at 25% — the drawer's default |
| `.backdrop-none` | No backdrop; the overlay still takes the top layer and traps focus |
Put the class next to `.dialog` or `.drawer`. `::backdrop` inherits custom properties from the element that opened it, so nothing else is needed.
## Examples
### Translucent dialog
```html
```
### Dark drawer
```html
```
### No backdrop
`.backdrop-none` hides the layer while the overlay keeps its modal behaviour — the top layer, the focus trap, the dismiss on Esc. It is the same effect the component-level `.dialog-no-backdrop` and `.drawer-no-backdrop` provide.
```html
```
## Customizing
### CSS variables
The three tokens live on `:root`, so a change there reaches every overlay; a change on one overlay reaches only its own backdrop.
```scss
--cui-backdrop-color: var(--cui-black),
--cui-backdrop-opacity: 50%,
--cui-backdrop-blur: 8px,
```
The helpers are nothing more than the first two tokens set on the element:
```scss
.backdrop-scrim {
--cui-backdrop-color: var(--cui-black);
--cui-backdrop-opacity: 50%;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.backdrop-scrim {
--cui-backdrop-opacity: 65%;
}
}
}
.backdrop-translucent {
--cui-backdrop-color: var(--cui-bg-body);
--cui-backdrop-opacity: 25%;
}
.backdrop-none::backdrop {
display: none;
}
```
A look the helpers do not cover is a matter of the same tokens — a brand-coloured tint with no blur:
```html
```