Introduction
Opacity and transparency are the two sides of the coin. Both are used for designing the website. With the help of those, we can create contrast and reinforce a brand's identity. There are many web designing techniques available in CSS. Out of those, we use opacity and transparency intentionally. We can control the opacity of any content with the help of the below things.
- background
- text
- border
- image
- gradient
- color
How to Set Opacity in CSS
By utilizing the CSS opacity property, we have the ability to adjust the transparency level of an image, element, or text on a webpage. The opacity value ranges from 0 to 1, with 0 rendering the element fully transparent or invisible, and 1 making it completely opaque. To illustrate this concept, let's delve into an example.
Example 1:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?cs=srgb&dl=pexels-pixabay-326055.jpg&fm=jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.overlay {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
text-align: center;
}
h1 {
color: #333;
font-size: 36px;
}
p {
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="overlay">
<h1>Welcome to C# Programming</h1>
<p>This is a stunning example of using opacity in CSS.</p>
</div>
</div>
</body>
</html>
Output
CSS Background Opacity
When you require the background element to be less opaque, you can utilize CSS background opacity. However, it's important to note that the style property cannot be directly applied to the opaque element but can be applied to its child element. This concept can be clarified through an example.
Example 2:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: url('background-image.jpg') center/cover no-repeat;
}
.container {
background-color: rgba(0, 0, 0, 0.5); /* Background color with opacity */
color: white;
padding: 20px;
border-radius: 10px;
width: 60%;
margin: 100px auto;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to C# Programming</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, a partially movable background with a background image has been established.
Text Opacity CSS
We can also incorporate the transparency functionality into CSS text. This process closely resembles applying opacity to an element's background. It is possible to apply the opacity property to the entire element, affecting the background, text content, border, and other elements. To adjust the text opacity, we must specify the CSS color attribute and an RGBA color value for the specific element. Let's delve into this concept through the following example.
Example 3:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 60%;
margin: 100px auto;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.6;
opacity: 0.7; /* Text opacity */
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to C# Programming</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, a webpage has been generated with text that has been set to a lower level of transparency.
Border Opacity CSS
We can additionally adjust the transparency of the border, mirroring the effect of applying transparency to the text. To accomplish this, the opacity property needs to be assigned to the specific element. Subsequently, the CSS shorthand for the border property and RGBA color values should be utilized.
Example 4:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 60%;
margin: 100px auto;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.container::before {
content:" ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgba(100, 150, 200, 0.5); /* New border color with opacity */
box-sizing: border-box;
z-index: -1;
}
h1 {
font-size: 36px;
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to C# Programming</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, a border with decreased opacity has been generated by utilizing the ::before pseudo-element.
Image Opacity in CSS
We can also apply the CSS opacity attribute to the image. The opacity can be adjusted to create a smooth transition when the user hovers over the element. This effect involves making the image slightly transparent initially, which then transitions to full opacity upon hovering, creating a reverse transparent hover effect.
Example 5:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.image-container {
width: 80%;
margin: 50px auto;
text-align: center;
position: relative;
}
.image-container::before {
content:" ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Overlay color with opacity */
z-index: -1;
}
img {
display: block;
max-width: 100%;
height: auto;
opacity: 0.7; /* Image opacity */
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Beautiful Sunset">
</div>
</body>
</html>
Output
CSS Opacity Gradient
We have the option to utilize the CSS gradient feature by incorporating the opacity property. This method allows for a seamless transition from one color to another in a specified direction, such as vertically, horizontally, or diagonally. It's important to note that the goal is not to alter the color gradient itself, but to smoothly transition one color from fully solid to completely see-through.
For this task, the CSS gradient property is not required. Instead, we can utilize the background property along with RGBA color values. This process closely resembles adjusting the background color of a webpage. To illustrate, let's delve into the following example.
Example 6:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.gradient-box {
width: 300px;
height: 300px;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.8));
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, a box has been generated with a CSS opacity gradient backdrop. Furthermore, within the same code snippet, a gradient has been established, transitioning from a partially transparent red (rgba(255, 0, 0, 0.8)) at the upper section to a partially transparent blue (rgba(0, 0, 255, 0.8)) at the lower part.
CSS Color Opacity
In the previous program, we have previously demonstrated altering the background color using the opacity property and the RGBA color model. However, now we will modify the color using HSL colors. Within CSS, HSL colors serve as a property that allows for defining the hue, saturation, lightness, and opacity of a color. The structure of the HSLA color closely resembles that of RGBA color codes. Let's delve into this concept through the following illustration.
Example 7:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.opacity-box {
width: 300px;
padding: 20px;
background-color: rgba(120, 200, 100, 0.7); /* Color with opacity */
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.opacity-box p {
margin: 0;
font-size: 16px;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<div class="opacity-box">
<p>This is a translucent box with a colourful background.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code, a container with a colored background has been generated. Within this code snippet, the rgba function is employed to specify color by incorporating Red, Green, Blue, and Alpha (opacity) values.