CSS display translucency
Displaying Translucency with CSS
Translucency is a common design requirement in web design, making page elements look more beautiful and modern. In CSS, we can achieve this by setting the transparency of an element. This article will detail how to use CSS to display translucency and provide multiple code examples for reference.
1. Use the opacity property to set element transparency
The opacity property in CSS can be used to set the transparency of an element. The value range is 0 to 1, where 0 is completely transparent and 1 is completely opaque. Here’s a simple example code that demonstrates how to use the opacity property to set an element’s transparency to 0.5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity Example</title>
<style>
.transparent {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="transparent">This is a transparent div.</div>
</body>
</html>
Output:
In the above example, we added the class name transparent to a div element and set the opacity property of this class to 0.5 in CSS to achieve a translucent effect. After running the code, you can see that the div element becomes translucent.
2. Use RGBA colors to set the transparency of an element’s background color
In addition to using the opacity property to set the transparency of an element’s background color, you can also use RGBA colors. RGBA colors consist of four values: red, green, blue, and an opacity value. The opacity value also ranges from 0 to 1. Here’s a sample code that demonstrates how to use RGBA colors to set an element’s background color to 0.5 transparency:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RGBA Color Example</title>
<style>
.transparent-bg {
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="transparent-bg">This is a div with transparent background color.</div>
</body>
</html>
Output:
In the above example, we added the class name transparent-bg to a div element and set its background-color property in CSS to rgba(0, 0, 0, 0.5), which means the black background color has a transparency of 0.5. To make the text more visible, we also set the text color to white. After running the code, you can see that the background color of the div element is translucent.
3. Using Pseudo-elements to Achieve Translucency
In addition to directly setting the transparency of an element or the background color transparency, we can also use pseudo-elements to achieve translucency. Here is an example code demonstrating how to use the pseudo-element ::before to create a semi-transparent overlay:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo Element Example</title>
<style>
.overlay {
position: relative;
}
.overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
position: relative;
z-index: 1;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="overlay">
<div class="content">This is a div with a semi-transparent overlay.</div>
</div>
</body>
</html>
Output:
In the example above, we create a structure containing two div elements, the outer div element has the class name overlay, and the inner div element has the class name content. By setting the background color of the .overlay::before pseudo-element to rgba(0, 0, 0, 0.5), we achieve a semi-transparent overlay effect. The z-index property of the inner div element is set to 1, placing it above the overlay, ensuring visibility of the content. After running the code, you can see that the overlay of the outer div element is semi-transparent.
4. Using the box-shadow property to achieve semi-transparency
In addition to background colors and pseudo-elements, we can also use the box-shadow property to achieve semi-transparency. Here is a code example showing how to use the box-shadow property to create a semi-transparent shadow effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we added the class name box to a div element and set the box-shadow property of that class to 0 0 10px rgba(0, 0, 0, 0.5) in CSS. This creates a translucent shadow effect around the div element. After running the code, you can see a translucent shadow appear around the div element.
5. Using background-image to achieve translucency
In addition to background color and shadows, we can also use the background-image property to achieve a translucent effect. Here’s a sample code demonstrating how to use the background-image property to set a semi-transparent background image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Image Example</title>
<style>
.bg-image {
width: 200px;
height: 200px;
background-image: url('https://geek-docs.com/wp-content/uploads/2021/10/https://coder-cafe.com/wp-content/uploads/2025/09/geek-docs-https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: cover;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="bg-image"></div>
</body>
</html>
Output:
In the above example, we added the bg-image class to a div element and set its background-image property in CSS to a semi-transparent background image with an opacity of 0.5. After running the code, you can see that the background image of the div element is semi-transparent.
6. Using the filter property to achieve a semi-transparent effect
In addition to the above methods, we can also use the filter property to achieve a semi-transparent effect. The filter property can apply different filter effects, including an opacity filter. Here’s a sample code demonstrating how to use the filter property:
“`html
<p>## 7. Using the :hover pseudo-class to achieve a semi-transparent effect on mouse hover</p>
<p>In addition to static semi-transparent effects, we can also use the :hover pseudo-class to achieve a semi-transparent effect when the mouse is hovering. The following is an example code demonstrating how to use the :hover pseudo-class to achieve a semi-transparent effect on an element when the mouse is hovering:</p>
<p>“`html<br>
<!DOCTYPE html><br>
<html lang=”en”><br>
<head><br>
<meta charset=”UTF-8″><br>
<title>Hover Effect Example</title><br>
<style><br>
.hover-effect {<br>
width: 200px;<br>
height: 200px;<br>
background-color: #2ecc71;<br>
transition: opacity 0.3s;<br>
}<br>
.hover-effect:hover {<br>
opacity: 0.5;<br>
}<br>
</style><br>
</head><br>
<body><br>
<div class=”hover-effect”></div><br>
</body><br>
</html><br>
</p>
<p>In the example above, we add the hover-effect class to a div element and set the :hover pseudo-class to that class in CSS. When the mouse hovers over the element, the element's opacity is set to 0.5. We also add the transition property to make the opacity change smoothly. After running the code, you'll see that when you hover your mouse over the div element, it becomes translucent. </p>
<h2>8. Using CSS Variables to Achieve Dynamic Translucency</h2>
<p>In addition to static translucency, we can also use CSS variables to achieve dynamic translucency. Here's an example code demonstrating how to use CSS variables and JavaScript to dynamically change the transparency of an element: </p>
<pre data-language="HTML"><code class="language-markup line-numbers"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Example</title>
<style>
:root {
--opacity: 1;
}
.dynamic-opacity {
width: 200px;
height: 200px;
background-color: #f39c12;
opacity: var(--opacity);
transition: opacity 0.3s;
}
</style>
</head>
<body>
<div class="dynamic-opacity"></div>
<button onclick="changeOpacity()">Change Opacity</button>
<script>
function changeOpacity() {
const element = document.querySelector('.dynamic-opacity');
const currentOpacity = parseFloat(getComputedStyle(element).getPropertyValue('--opacity'));
const newOpacity = currentOpacity === 1 ? 0.5 : 1;
element.style.setProperty('--opacity', newOpacity);
} </script>
</body>
</html>
In the example above, we use the CSS variable –opacity to control the element’s transparency, with an initial value of 1. Using the changeOpacity function in JavaScript, we can dynamically change the element’s transparency between 1 and 0.5. After running the code, click the button to see the element’s transparency dynamically change.
Conclusion
This article detailed how to use CSS to create translucency effects, including various methods using the opacity property, RGBA colors, pseudo-elements, box-shadow, background-image, the filter property, the :hover pseudo-class, and CSS variables.