Frosted glass background

Developer
Oliver Turner
Size
2,963 Kb
Views
12,144
  1. Frosted glass background Previews
  2. Frosted glass background HTML Codes
  3. Frosted glass background CSS Codes

How do I make an frosted glass background?

Centering and blurring an image behind text and tags. What is a frosted glass background? How do you make a frosted glass background? This script and codes were developed by Oliver Turner on 28 November 2022, Monday.

Frosted glass background Previews
IQ Test

Frosted glass background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Frosted glass background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo"> <article class="item"> <h1 class="item__title">Support growing in Commons for bombing Isis in Syria, says Philip Hammond</h1> <div class="item__tags"> <a href="#" class="item__tag">rhetoric</a> <a href="#" class="item__tag">militarism</a> <a href="#" class="item__tag">bragadoccio</a> </div> </article>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="3"/> </filter> </defs>
</svg>
</body>
</html>

Frosted glass background - Script Codes CSS Codes

a { color: inherit;
}
.item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: relative; width: 250px; height: 400px; color: #fff;
}
.item::before,
.item::after { content: ' '; display: block; position: absolute; z-index: -1;
}
.item::before { width: 100%; height: 100%; background: #000;
}
.item::after { top: -5%; left: -5%; width: 110%; height: 110%; opacity: 0.8; background-image: url("https://i.guim.co.uk/img/media/ae7b00517964dd7116e41f1f3deaab27d0927a83/0_0_5760_3457/master/5760.jpg?w=1920&q=85&auto=format&sharp=10&s=649caeea4acdfa5824ca9a11a3b10c46"); background-position: center center; background-size: cover; -webkit-filter: url("#blur"); filter: url("#blur");
}
.item__title { margin: 0; padding: 10px 15px; font: 28px helvetica; font-weight: 100;
}
.item__tags { margin-top: auto; padding: 15px; font-size: 12px; color: #666;
}
.item__tag { display: inline-block; margin: 5px 2px; padding: 5px 10px; border-radius: 50px; text-decoration: none; background: #ccc;
}
.demo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100vh;
}
Frosted glass background - Script Codes
Frosted glass background - Script Codes
Home Page Home
Developer Oliver Turner
Username codedsignal
Uploaded November 28, 2022
Rating 3
Size 2,963 Kb
Views 12,144
Do you need developer help for Frosted glass background?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Turner (codedsignal) Script Codes
Name
Isometric projection using skew
Off-canvas file upload
Observable Magic Gradient
Single-element 3d speech bubble
A Pen by Oliver Turner
ColorLovers Reloadable
Cagey Avatar
The beauty of margin-top in a flex context
Remcon navigation
Single element title decoration
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!