Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<title>Mask-image with backdrop-filter inside parent with border-radius and overflow hidden</title>
<link rel="match" href="mask-image-backdrop-filter-with-border-radius-ref.html">
<meta name="fuzzy" content="maxDifference=0-55; totalPixels=0-5">
<div class="wrapper">
<div class="element">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</div>
<style>
body {
background-color: rgb(173, 216, 230);
}
.wrapper {
border-radius: 1px;
overflow: hidden;
}
.element {
backdrop-filter: saturate(300%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
}
</style>