Core Code
Core Code Modern Dev Handbook

CSS Overlay With Opacity

Opacity is often used to create overlay backgrounds.

Preview

Code

<style>
.overlay{
background:black;
opacity:0.5;
color:white;
padding:20px;
}
</style>

<div class="overlay">Overlay text</div>

More CSS Opacity Examples (7)

example CSS Opacity Basic open example example CSS Opacity Levels open example example CSS Opacity Hover Effect open example example CSS Image Opacity open example example CSS Opacity vs RGBA open example example CSS Opacity Transition open example example CSS Card Hover Opacity open example