CSS Glass Effect
CSS Glass Effect
In web design, glass effects are widely used to enhance the aesthetics and modernity of a page. Implementing glass effects with CSS can make web pages look more stylish and attractive. This article will detail how to achieve this with CSS, providing code examples and demonstrations.
How it works
The CSS glass effect primarily utilizes the backdrop-filter property and the blur() function to set a blur effect, and the transparency function to create a translucent, glass-like effect. By combining these properties, you can easily create a variety of glass effects.
Example code
HTML part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="glass-container">
<div class="content">
<h1>Glass Effect</h1>
<p>This is a sample text for glass effect demonstration.</p>
</div> </div>
</body>
</html>
CSS part (styles.css)
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url('background.jpg');
background-size: cover;
}
.glass-container {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 50px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.content {
text-align: center;
}
h1 {
font-size: 3rem;
color: #333;
}
p {
font-size: 1.2rem;
color: #666;
}
In the example code above, we implement a simple glass effect using HTML and CSS. The backdrop-filter: blur(10px) property adds a blur effect to the container, and the background color’s transparency is set to 0.3, allowing the background image to appear transparent through the container.
Effect Demonstration
Through the example code above, we can see a simple glass effect in action. The text on the page appears translucent, and the background image appears blurred through the container, creating a very beautiful and modern look.
The actual effect is shown below:
[Image Display Effect]
Summary
Using the CSS backdrop-filter property and the blur() function, we can easily create various glass effects, adding more beauty and a modern feel to web pages. When designing a web page, you can adjust and customize the glass effect according to your needs to make the page more attractive.