# Day 22: the ::backdrop pseudo-element

DevFeed: [Day 22: the ::backdrop pseudo-element](<https://devfeed.tech/articles/day-22-the-backdrop-pseudo-element-52189.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2022/100daysof-day22>)

Author: Manuel Matuzović

Published: 2022-10-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [background](<https://devfeed.tech/tags/background.md>), [color](<https://devfeed.tech/tags/color.md>), [conic-gradient](<https://devfeed.tech/tags/conic-gradient.md>), [css](<https://devfeed.tech/tags/css.md>), [gradient](<https://devfeed.tech/tags/gradient.md>), [modal](<https://devfeed.tech/tags/modal.md>), [rgb](<https://devfeed.tech/tags/rgb.md>), [style](<https://devfeed.tech/tags/style.md>)

## AI overview

A concise CSS tutorial on using the ::backdrop pseudo-element to style modal dialogs and elements displayed in fullscreen mode through the Fullscreen API. It demonstrates semi-transparent backgrounds as well as conic gradients and outlines.

## Source excerpt

You can use the ::backdrop pseudo-element to style the backdrop of modal dialogs and elements which have been placed in fullscreen mode using the Fullscreen API. ::backdrop { background-color: rgb(0 0 0 / 0.5); } yo! close show modal You don't have to limit yourself to semi-transparent background color. ::backdrop { background: conic-gradient(red, orange, yellow, green, red); outline: 20px solid white; outline-offset: -20px; } yo! close show modal My blog doesn't support comments yet, but you can reply via blog@matuzo.at.