Glass Cover / Milchglas / background-blur / backdrop-filter

<!-- Source -> --> <header class='glass'> <div>hallo</div> </header> <svg xmlns="" version="1.1"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> </svg> <style> /* LAYOUT */ html, body { width: 100%; height: 100%; overflow: hidden; background-image: url(''); background-size: cover; } .glass { width: 100%; overflow: hidden; position: relative; background-color: red; transform: translateY(0) translateY(-0); } .glass > div { padding: 30px; } .glass::before { width: 100%; height: 100%; overflow: hidden; z-index: -1; display: block; position: absolute; content: ' '; background-image: url(''); -webkit-filter: url('#blur'); filter: url('#blur'); -webkit-filter: blur(5px); filter: blur(5px); background-size: cover; opacity: 0.4; transform: translateY(0) translateY(0); } </style>
Safari only...

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.