csspostcss
backdrop-filter blur not rendering properly on Safari
When previewing my website in Safari (mobile and desktop) there are strange rendering issues with backdrop-filter: blur();. I am using PostCSS with the autoprefixer plugin so the code generates the corresponding vendor prefix for backdrop-filter. I verified this by checking both the build directory and using the developer tools in Safari.
Left image is Chrome/Firefox and right image is Safari
Here is a snippet of the HTML/CSS causing this:
.border {
--blur: 20px;
--margin: 10px;
backdrop-filter: blur(var(--blur));
width: calc(100vw - var(--margin) * 2);
height: calc(100vh - var(--margin) * 2);
margin: var(--margin);
border-image: url('data:image/svg+xml,<svg width="261" height="261" viewBox="0 0 261 261" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_182_2783)"><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="251" y1="180.75" x2="231" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="181.25" x2="231" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="80.75" x2="231" y2="80.75" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line x1="10" y1="80.25" x2="30" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="79.75" x2="30" y2="79.75" stroke="%23666666" stroke-width="0.5"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line x1="10" y1="180.75" x2="30" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="181.25" x2="30" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="120.5" y1="20" x2="120.5" y2="30" stroke="%23666666"/><line x1="110.5" y1="20" x2="110.5" y2="30" stroke="%23666666"/><line x1="100.5" y1="20" x2="100.5" y2="30" stroke="%23666666"/><line x1="90.5" y1="20" x2="90.5" y2="30" stroke="%23666666"/><line x1="70.5" y1="20" x2="70.5" y2="30" stroke="%23666666"/><line x1="60.5" y1="20" x2="60.5" y2="30" stroke="%23666666"/><line x1="50.5" y1="20" x2="50.5" y2="30" stroke="%23666666"/><line x1="40.5" y1="20" x2="40.5" y2="30" stroke="%23666666"/><line x1="80.25" y1="10" x2="80.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="10" x2="79.75" y2="30" stroke="%23666666" stroke-width="0.5"/><path d="M30.5 0L30.5 30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="220.5" y1="20" x2="220.5" y2="30" stroke="%23666666"/><line x1="210.5" y1="20" x2="210.5" y2="30" stroke="%23666666"/><line x1="200.5" y1="20" x2="200.5" y2="30" stroke="%23666666"/><line x1="190.5" y1="20" x2="190.5" y2="30" stroke="%23666666"/><line x1="170.5" y1="20" x2="170.5" y2="30" stroke="%23666666"/><line x1="160.5" y1="20" x2="160.5" y2="30" stroke="%23666666"/><line x1="150.5" y1="20" x2="150.5" y2="30" stroke="%23666666"/><line x1="140.5" y1="20" x2="140.5" y2="30" stroke="%23666666"/><line x1="180.75" y1="10" x2="180.75" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="10" x2="181.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="125" y1="130.5" x2="130" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="136" x2="130.5" y2="131" stroke="%23666666"/><line x1="136" y1="130.5" x2="131" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="125" x2="130.5" y2="130" stroke="%23666666"/><line x1="30.5" y1="261" x2="30.5" y2="231" stroke="%23666666"/><line x1="40.5" y1="241" x2="40.5" y2="231" stroke="%23666666"/><line x1="50.5" y1="241" x2="50.5" y2="231" stroke="%23666666"/><line x1="60.5" y1="241" x2="60.5" y2="231" stroke="%23666666"/><line x1="70.5" y1="241" x2="70.5" y2="231" stroke="%23666666"/><line x1="90.5" y1="241" x2="90.5" y2="231" stroke="%23666666"/><line x1="100.5" y1="241" x2="100.5" y2="231" stroke="%23666666"/><line x1="110.5" y1="241" x2="110.5" y2="231" stroke="%23666666"/><line x1="120.5" y1="241" x2="120.5" y2="231" stroke="%23666666"/><line x1="80.25" y1="251" x2="80.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="251" x2="79.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="140.5" y1="241" x2="140.5" y2="231" stroke="%23666666"/><line x1="150.5" y1="241" x2="150.5" y2="231" stroke="%23666666"/><line x1="160.5" y1="241" x2="160.5" y2="231" stroke="%23666666"/><line x1="170.5" y1="241" x2="170.5" y2="231" stroke="%23666666"/><line x1="190.5" y1="241" x2="190.5" y2="231" stroke="%23666666"/><line x1="200.5" y1="241" x2="200.5" y2="231" stroke="%23666666"/><line x1="210.5" y1="241" x2="210.5" y2="231" stroke="%23666666"/><line x1="220.5" y1="241" x2="220.5" y2="231" stroke="%23666666"/><line x1="180.75" y1="251" x2="180.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="251" x2="181.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/></g><defs><clipPath id="clip0_182_2783"><rect width="261" height="261" fill="white"/></clipPath></defs></svg>') 80 fill / 80px round;
padding: 60px;
& div {
width: 100%;
height: 100%;
/* Temporary styles */
display: grid;
place-items: center;
&::before {
--transition: 35%;
--opacity: 50%;
content: '';
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(var(--blur));
mask-image: linear-gradient(to top, black var(--transition), transparent 100%);
}
}
}<div class="border">
<div>
<h1>Hello World!</h1>
</div>
</div>Having a hard time pinpointing the issue and/or making a change to the CSS that removes the background gradient blur effect that I am trying to create.
Some of my initial tests make me believe its either an issue with the ::before pseudo-class, the z-index: -1;, or the blur() itself.
Solution
Some issues:
- HTML: inner div is not closed properly. It may be forgivable or may screw up your layout completely.
- You don't need
backdrop-filteron.borderas it renders in Safari 18.2 as a weird grey background with circles around+markers. z-index:-1on::beforesets it behind.borderin Safari and it has no visual effect except one mentioned above.
So I've changed your code this way:
* {
box-sizing: border-box;
}
.border {
--blur: 20px;
--margin: 10px;
width: calc(100vw - var(--margin) * 2);
height: calc(100vh - var(--margin) * 2);
margin: var(--margin);
padding: 60px;
border-image: url('data:image/svg+xml,<svg width="261" height="261" viewBox="0 0 261 261" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_182_2783)"><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="251" y1="180.75" x2="231" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="181.25" x2="231" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="80.75" x2="231" y2="80.75" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line x1="10" y1="80.25" x2="30" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="79.75" x2="30" y2="79.75" stroke="%23666666" stroke-width="0.5"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line x1="10" y1="180.75" x2="30" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="181.25" x2="30" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="120.5" y1="20" x2="120.5" y2="30" stroke="%23666666"/><line x1="110.5" y1="20" x2="110.5" y2="30" stroke="%23666666"/><line x1="100.5" y1="20" x2="100.5" y2="30" stroke="%23666666"/><line x1="90.5" y1="20" x2="90.5" y2="30" stroke="%23666666"/><line x1="70.5" y1="20" x2="70.5" y2="30" stroke="%23666666"/><line x1="60.5" y1="20" x2="60.5" y2="30" stroke="%23666666"/><line x1="50.5" y1="20" x2="50.5" y2="30" stroke="%23666666"/><line x1="40.5" y1="20" x2="40.5" y2="30" stroke="%23666666"/><line x1="80.25" y1="10" x2="80.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="10" x2="79.75" y2="30" stroke="%23666666" stroke-width="0.5"/><path d="M30.5 0L30.5 30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="220.5" y1="20" x2="220.5" y2="30" stroke="%23666666"/><line x1="210.5" y1="20" x2="210.5" y2="30" stroke="%23666666"/><line x1="200.5" y1="20" x2="200.5" y2="30" stroke="%23666666"/><line x1="190.5" y1="20" x2="190.5" y2="30" stroke="%23666666"/><line x1="170.5" y1="20" x2="170.5" y2="30" stroke="%23666666"/><line x1="160.5" y1="20" x2="160.5" y2="30" stroke="%23666666"/><line x1="150.5" y1="20" x2="150.5" y2="30" stroke="%23666666"/><line x1="140.5" y1="20" x2="140.5" y2="30" stroke="%23666666"/><line x1="180.75" y1="10" x2="180.75" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="10" x2="181.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="125" y1="130.5" x2="130" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="136" x2="130.5" y2="131" stroke="%23666666"/><line x1="136" y1="130.5" x2="131" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="125" x2="130.5" y2="130" stroke="%23666666"/><line x1="30.5" y1="261" x2="30.5" y2="231" stroke="%23666666"/><line x1="40.5" y1="241" x2="40.5" y2="231" stroke="%23666666"/><line x1="50.5" y1="241" x2="50.5" y2="231" stroke="%23666666"/><line x1="60.5" y1="241" x2="60.5" y2="231" stroke="%23666666"/><line x1="70.5" y1="241" x2="70.5" y2="231" stroke="%23666666"/><line x1="90.5" y1="241" x2="90.5" y2="231" stroke="%23666666"/><line x1="100.5" y1="241" x2="100.5" y2="231" stroke="%23666666"/><line x1="110.5" y1="241" x2="110.5" y2="231" stroke="%23666666"/><line x1="120.5" y1="241" x2="120.5" y2="231" stroke="%23666666"/><line x1="80.25" y1="251" x2="80.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="251" x2="79.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="140.5" y1="241" x2="140.5" y2="231" stroke="%23666666"/><line x1="150.5" y1="241" x2="150.5" y2="231" stroke="%23666666"/><line x1="160.5" y1="241" x2="160.5" y2="231" stroke="%23666666"/><line x1="170.5" y1="241" x2="170.5" y2="231" stroke="%23666666"/><line x1="190.5" y1="241" x2="190.5" y2="231" stroke="%23666666"/><line x1="200.5" y1="241" x2="200.5" y2="231" stroke="%23666666"/><line x1="210.5" y1="241" x2="210.5" y2="231" stroke="%23666666"/><line x1="220.5" y1="241" x2="220.5" y2="231" stroke="%23666666"/><line x1="180.75" y1="251" x2="180.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="251" x2="181.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/></g><defs><clipPath id="clip0_182_2783"><rect width="261" height="261" fill="white"/></clipPath></defs></svg>') 80 fill / 80px round;
&::before {
--transition: 35%;
--opacity: 50%;
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(var(--blur));
mask-image: linear-gradient(to top, black var(--transition), transparent 100%);
}
& div {
position: relative;
width: 100%;
height: 100%;
/* Temporary styles */
display: grid;
place-items: center;
}
}<div class="border">
<div>
<h1>Hello World!</h1>
</div>
</div>- My YouTube video wont show in iframe
- I'm trying to place the placeholder in the border of the input field
- CSS to specify full page width at printing?
- Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
- how to send styles with html email
- CSS: Full Size background image
- Convert TailwindCSS to native CSS?
- CSS ellipsis on second line
- Conditional rendering based on authentication security question
- CSS3 unicode-range does not work in Firefox
- Working alternative for {background-clip: text} to achieve transparent text with gradient background in browsers other than Chrome
- IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled
- Adding More Slant To Italic Text
- Converting CSS hover event to javascript Click event
- How to have a text-overflow ellipsis at the beginning of a left-to-right element
- Google Maps Autocomplete Result in Bootstrap Modal Dialog
- Changing vertical scroll to horizontal
- grid header will be hide in p-dialog during minimize the browser
- How to get div content to take up available space when another element inside of it changes size?
- Can CSS resize property be used to resize flex column widths?
- Old paper background texture with just css
- How to configure next.js project with tailwindcss when module.css structure is already being used
- overflow-y: hidden but should enable mouse scrolling
- loading="lazy" but for html5 videos
- Custom Styling Background Color for Mat-Menu in Angular Material
- Set mat-menu style
- How to position an element to the right side?
- Adding tailwind in my PHP project using the tailwind CLI won't display the styles in the frotend. output.css is empty or icorrect
- CSS Transform scale, don't scale child element
- backdrop-filter blur not rendering properly on Safari