Introduction
We can create background blur images, which makes the web page beautiful to the user. We can achieve this with the help of the backdrop-filter property. In this article, we are going to learn about how to blur the background image in the webpage and what is the method to achieve this.
How to Make a Background Blur in CSS?
Before knowing about the backdrop-filter property, let's understand the way to make the background image blur. If we add the background blur image, then it will increase the appearance of the web page. If we provide an element with a background blur image, then the user can easily identify the element among all the elements. There are some CSS filter properties by which we can create the blur effect. We can also use the background blur image in the creation of Photoshop filters on the web. These are also applied to graphics, backgrounds, and borders.
With the help of the blur function of the filter, which creates the Gaussian blur to the source image. We have to set the value of the radius, which is similar to the value of standard deviation to the Gaussian function or a number of pixel values on the screen blend into each other. If we don't provide any parameter, then it will set the default value, which is zero.
Syntax:
filter: blur(px);
Example:
<!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>
.blurry-background {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.blurry-background::before {
content:" ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://images.C# Tutorial/corebasic/images/java-training.png");
filter: blur(2px); /* Adjust the blur amount as needed */
z-index: -1;
}
.content {
position: relative;
z-index: 1;
padding: 20px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="blurry-background">
<div class="content">
<h1 style="color: red;">Welcome to C# Programming</h1>
<p style="color: blue;">This is some content over a blurry background.</p>
</div>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we've generated the backdrop blur image where the .blurry-background class signifies the element containing the fuzzy background appearance. Utilizing the ::before pseudo-element enables the formation of the overlay featuring the blurred background graphic. The filter: blur attribute is accountable for the blurring impact, allowing customization of the blur intensity by modifying the value (e.g., 2px).
The specific content resides inside the .content div, which is assigned a higher z-index to guarantee its visibility over the blurred background.
What is Backdrop-Filter?
In CSS, the backdrop filter property enables the application of filters like grayscale, contrast, blur, etc., to the background or backdrop element. This feature affects only a specific element and does not alter the entire webpage. Additionally, it offers graphical enhancements like blurring or color adjustments behind the element, along with reflecting opacity within that specific area. To grasp this concept better, let's explore an illustration.
Example:
<!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 {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 800px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
backdrop-filter: blur(10px); /* Apply backdrop filter to the container */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
border-radius: 10px;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
text-align: center;
}
.content1 {
background-color: rgba(255, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
.content2 {
background-color: rgba(0, 255, 0, 0.5);
backdrop-filter: grayscale(80%);
}
.content3 {
background-color: rgba(0, 0, 255, 0.5);
backdrop-filter: sepia(80%);
}
.content4 {
background-color: rgba(255, 255, 0, 0.5);
backdrop-filter: saturate(8);
}
.content5 {
background-color: rgba(0, 255, 255, 0.5);
backdrop-filter: hue-rotate(80deg);
}
.content6 {
background-color: rgba(255, 0, 255, 0.5);
backdrop-filter: invert(80%);
}
.text {
margin: 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content content1">
<h4 class="text">backdrop-filter: blur(8px);</h4>
</div>
<div class="content content2">
<h4 class="text">backdrop-filter: grayscale(80%);</h4>
</div>
<div class="content content3">
<h4 class="text">backdrop-filter: sepia(80%);</h4>
</div>
<div class="content content4">
<h4 class="text">backdrop-filter: saturate(8);</h4>
</div>
<div class="content content5">
<h4 class="text">backdrop-filter: hue-rotate(80deg);</h4>
</div>
<div class="content content6">
<h4 class="text">backdrop-filter: invert(80%);</h4>
</div>
</div>
</body>
</html>
Output
Explanation:
In the previous code snippet, we applied CSS styling to the <body> element to center it on the webpage and introduce a background color. Subsequently, we formatted the .container element with a grid system, padding, rounded edges, a background hue, a backdrop filter, and a subtle box shadow. Additionally, we customized each .content element with a distinct background color, rounded corners, and centered text alignment. Following that, we fine-tuned the backdrop-filter settings for individual .content elements to implement varied filter effects. Finally, we increased the spacing between the .content components by utilizing the gap property within the grid layout.
Example 2:
<!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;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Lato', sans-serif;
background-color: #f0f0f0;
}
h2 {
margin-top: 20px;
margin-bottom: 15px;
font-size: 1.8em;
color: #333;
}
img {
max-width: 100%;
margin-bottom: 20px;
filter: grayscale(80%);
}
.backdrop {
background: url("https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_640.jpg") center/cover no-repeat;
width: 100%;
height: 220px; /* Adjusted height for the smaller image */
margin-bottom: 40px;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: grayscale(80%);
border-radius: 10px;
text-align: center;
}
p {
color: #333;
font-size: 1.2em;
font-weight: bold;
margin-top: 10px;
}
h3 {
color: #333;
font-size: 2em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Image Filter: grayscale(80%);</h2>
<img style="height: 100px; width: 100px;" class="just-filter" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Filtered Image">
<h2>Backdrop Filter: grayscale(80%);</h2>
<div class="backdrop">
<div class="content">
<h3>New York City</h3>
<p>Explore our amazing travel plans to NYC.</p>
</div>
</div>
</body>
</html>
Output
A Simple Example
There is a necessity for a designated element to execute the backdrop filter property. Once the filter property is administered, all modifications are targeted at the specified element. Let's consider a different scenario to grasp this concept better.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beautiful Backdrop Filter Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.card {
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-image {
width: 100%;
height: 60%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABU1BMVEX39/cAAAD////29vbuAAL6+vrLAAD79/v99fL5v7fyAAHy+fkEBATrAwLz8/PvAADs7OzV1dXYAADh4eG+vr6wsLCTk5O4uLjkAADOzs6JiYmkpKTgAADb29ufn59ra2tJSUl1dXXDAAD5AABZWVk5OTkqKiqBgYH99PkPDw/w+/QfHx/Q0NBiYmIyMjJQUFBAQED09v/FAAD4trPp/fz/7OgYGBj/9f//9vH2vL74/O/vxLv339j+7uG0Uk23AACVLTT81NTLABTqpaj/5Obr/uzffoHqYFbOOzvFHRz/yMDml5bVXFzoZWT4rLPXSEn/yMziiY/gfXbmqZzxc3jwmqjShorFjJLkvsHeeoPliqDnWF3PJSrXa2fKRk/FT026PDzBLinF29WnmaSxERP5lJvbQEjVCh/choXXXmHpo6DuU2HgOjrabnjnmYr81NmiFBscMCyMAAAOBUlEQVR4nO2b/VvbRhLH5ZXXEhaSZfn9HWODZfHqBCLhkMuR0lwICUmTvlyuSVru+na56/X+/59uZlZ2DC02pAToPfN5UpAXSbvfndmZWcnVNIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhbjSRqVnSMKyLAxcHQWANBobva8F165iGYRiOhT8vhu/76mBgGTda4dYgDA1tGJkXJlZqgh11w7huHWcDCv3tu3MfwE7M7jDQbrJCEzzs3p/upz4Ez/NS9/+8Z0pNs65bx9mAewbDuQfJ9MXpdDqZTOqTfViPN3kdfmqGRrD90EvaF6UM/+reX+5F2iC8wU6qfaqHoaXtPqpn0uVyJp0k0hk7ncafJ4CGdLKczKhzkiixfvB4GFhG6JvXrWMW8t1iplP30iOF9UUvdct7T0r9gF/36/E5SRSbOoyue+jnZf+JlxnbJ1N+evvo9t3bp9jZmds5mntajo2YSafrz7ave+Dnxn++aHfS4Ik0du8wgjQn5XAY4C8REPBb+sNDTym0Mx37YC66wUH0JJb/MJWGlRjb8LPIF8I3BIJpXagjaDMf2rENy+nUwyj4Aynch2Bjxwrrh0MrCESAsrAEhWMpZYAfhi9iL7WTqWe7UJZe98jPiynDo1Rm5KX1l0PQMgyg+pTKfFCcG0EEEocv6kph2v7utmkNwqscJUyz1D/wWlMO9p+W02iaDGSJz9998cVnr7788suv9sFFpfD/+hV8ePXqb18cfZ1RcTSdenEvkKE/6866TgOT2qyhzRy6zGUbjYb7gRot3wjuvoZsYdvpDtiyTNQz9+/i6hPRGy+jmso2xKNO2rPrb3eHlj87EeqOzMHAsq4uzz7J0XSpTzsBEb1Efz5RExfVFo9Ds6zo4S3wPdtGZ80gIGUxVvik3kmqRvgJ5YCdvHUEYeY85ZouqgmgOWVkJE5KZ/qNRBHvU5gxD2fhW1uGv/fWAw8FM9lx1WKnQSGy/Q0ojFuTUNikwUe3ta3zKJSaaOPIStPOkQLMOGvookUKRzOl63T3qT4LjuGQa+iaH2yFRrSziIWZPSrM0IZ7FGe2vy1PKMzU7eTxrg7b+1CzcImdQnV9amR5/fQp73EbzfZKboZATWZXK5VKbnypJAXTr0Hn13EKNdOyDMvy33jJDoiMCzOoRO/vokCBCseWhXxZ//Eogq19CNuK3+jDkeq+o3FkYWAVd3ImYHHquPriKWjCDKw4s9YhnT9pNAkjmx53JNwUsC# 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");
background-size: cover;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.card-description {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h2 class="card-title">Welcome to C# Programming</h2>
<p class="card-description">This is the best platform to learn web technologies.....</p>
</div>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, a .card class was established to serve as the wrapper for the card layout. This class employs the backdrop-filter: blur(10px) CSS property to generate a blur effect on the underlying background. Additionally, a .card-image class was defined to manage the image section located at the top of the card. The .card-content class offers spacing around the content within the card. The styling for the card's title and description is controlled by the .card-title and .card-description classes.
Filtered Backgrounds without backdrop-filter
We can achieve the background blur effect without relying on the backdrop property. Let's explore this concept through an illustrative example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtered Background Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.card {
width: 300px;
height: 400px;
position: relative;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABU1BMVEX39/cAAAD////29vbuAAL6+vrLAAD79/v99fL5v7fyAAHy+fkEBATrAwLz8/PvAADs7OzV1dXYAADh4eG+vr6wsLCTk5O4uLjkAADOzs6JiYmkpKTgAADb29ufn59ra2tJSUl1dXXDAAD5AABZWVk5OTkqKiqBgYH99PkPDw/w+/QfHx/Q0NBiYmIyMjJQUFBAQED09v/FAAD4trPp/fz/7OgYGBj/9f//9vH2vL74/O/vxLv339j+7uG0Uk23AACVLTT81NTLABTqpaj/5Obr/uzffoHqYFbOOzvFHRz/yMDml5bVXFzoZWT4rLPXSEn/yMziiY/gfXbmqZzxc3jwmqjShorFjJLkvsHeeoPliqDnWF3PJSrXa2fKRk/FT026PDzBLinF29WnmaSxERP5lJvbQEjVCh/choXXXmHpo6DuU2HgOjrabnjnmYr81NmiFBscMCyMAAAOBUlEQVR4nO2b/VvbRhLH5ZXXEhaSZfn9HWODZfHqBCLhkMuR0lwICUmTvlyuSVru+na56/X+/59uZlZ2DC02pAToPfN5UpAXSbvfndmZWcnVNIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhbjSRqVnSMKyLAxcHQWANBobva8F165iGYRiOhT8vhu/76mBgGTda4dYgDA1tGJkXJlZqgh11w7huHWcDCv3tu3MfwE7M7jDQbrJCEzzs3p/upz4Ez/NS9/+8Z0pNs65bx9mAewbDuQfJ9MXpdDqZTOqTfViPN3kdfmqGRrD90EvaF6UM/+reX+5F2iC8wU6qfaqHoaXtPqpn0uVyJp0k0hk7ncafJ4CGdLKczKhzkiixfvB4GFhG6JvXrWMW8t1iplP30iOF9UUvdct7T0r9gF/36/E5SRSbOoyue+jnZf+JlxnbJ1N+evvo9t3bp9jZmds5mntajo2YSafrz7ave+Dnxn++aHfS4Ik0du8wgjQn5XAY4C8REPBb+sNDTym0Mx37YC66wUH0JJb/MJWGlRjb8LPIF8I3BIJpXagjaDMf2rENy+nUwyj4Aynch2Bjxwrrh0MrCESAsrAEhWMpZYAfhi9iL7WTqWe7UJZe98jPiynDo1Rm5KX1l0PQMgyg+pTKfFCcG0EEEocv6kph2v7utmkNwqscJUyz1D/wWlMO9p+W02iaDGSJz9998cVnr7788suv9sFFpfD/+hV8ePXqb18cfZ1RcTSdenEvkKE/6866TgOT2qyhzRy6zGUbjYb7gRot3wjuvoZsYdvpDtiyTNQz9+/i6hPRGy+jmso2xKNO2rPrb3eHlj87EeqOzMHAsq4uzz7J0XSpTzsBEb1Efz5RExfVFo9Ds6zo4S3wPdtGZ80gIGUxVvik3kmqRvgJ5YCdvHUEYeY85ZouqgmgOWVkJE5KZ/qNRBHvU5gxD2fhW1uGv/fWAw8FM9lx1WKnQSGy/Q0ojFuTUNikwUe3ta3zKJSaaOPIStPOkQLMOGvookUKRzOl63T3qT4LjuGQa+iaH2yFRrSziIWZPSrM0IZ7FGe2vy1PKMzU7eTxrg7b+1CzcImdQnV9amR5/fQp73EbzfZKboZATWZXK5VKbnypJAXTr0Hn13EKNdOyDMvy33jJDoiMCzOoRO/vokCBCseWhXxZ//Eogq19CNuK3+jDkeq+o3FkYWAVd3ImYHHquPriKWjCDKw4s9YhnT9pNAkjmx53JNwUsC# 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");
background-size: cover;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.card-description {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="card">
<div class="overlay"></div>
<div class="card-content">
<h2 class="card-title">Filtered Background Design</h2>
<p class= "card-description">Achieve filtered backgrounds using overlay elements for a stylish appearance.</p>
</div>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we've established a .card class that symbolizes the enclosure for the card layout, featuring the background image configured through the background-image attribute. An additional .overlay class has been defined to generate a partially transparent overlay layer positioned above the background image. It is possible to modify the transparency level and color to attain the intended visual outcome.
Syntax for Backdrop Filter Property
There are numerous attributes associated with the backdrop filter property. Let's delve into each of these individually.
.element {
backdrop-filter: <filter-function> [<filter-function>]* | none
}
Here, <filter-function> symbolizes the visual function utilized to modify the look of the webpage.
Properties of the Backdrop Filter
Let's explore the characteristics of the backdrop filter with a few illustrations.
- Blur;
By utilizing these attributes, we can implement the overlay blur feature on the background image. This allows us to add a blur effect to a container or any selected element, resulting in a Gaussian blur effect on the content. The blur radius property dictates the intensity of the blur effect applied to the background image.
Syntax:
blur(radius)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.blurred-image {
width: 300px;
height: 200px;
background-image: url("https://st2.depositphotos.com/1026550/7026/i/450/depositphotos_70260873-stock-photo-planet-earth-from-the-space.jpg");
background-size: cover;
filter: blur(10px); /* Apply the blur effect */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="blurred-image"></div>
<div class="content">
<h2>Blur Effect Example</h2>
<p>Create a beautiful blur effect on images using the blur() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
Here, The .blurred-image class generates a box with a backdrop graphic that undergoes blurring by employing the blur filter method. You have the flexibility to modify the 10px measurement to manage the strength of the blur.
- brightness
By utilizing this feature, we have the capability to adjust a linear factor to multiple input images. This enables us to adjust the brightness level of the background image, increasing or decreasing it as needed. Adjusting the brightness value to below 100 decreases the intensity, while setting it above 100 increases the intensity accordingly.
Syntax:
We can achieve this characteristic by utilizing the following syntax.
brightness(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brightness Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.brightened-image {
width: 300px;
height: 200px;
background-image: url("https://www.timeforkids.com/wp-content/uploads/2018/08/Planets-HERO.jpg");
background-size: cover;
filter: brightness(1.9); /* Adjust the brightness value */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="brightened-image"></div>
<div class="content">
<h2>Brightness Effect Example</h2>
<p>Adjust the brightness of images using the brightness() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we've established a .brightened-image class responsible for generating a container featuring a background image. The brightness filter function is then utilized to modify the brightness of the image. Tweaking the value to 1.9 allows for precise control over the brightness level. Additionally, the .content class was crafted to offer a background adorned with a subtle overlay and rounded edges, ideal for presenting content effectively.
- contrast
By utilizing this feature, we have the capability to modify the contrast of the input image. It is possible to adjust the contrast intensity by altering the brightness value to a value below 100 for reduced intensity or above 100 for increased intensity.
Syntax:
We can integrate this characteristic using the following syntax.
contrast(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contrast Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.contrasted-image {
width: 300px;
height: 200px;
background-image: url("https://cdn.mos.cms.futurecdn.net/DQyNHder4hmYdLZ4Wf5oS3.jpg");
background-size: cover;
filter: contrast(1.8); /* Adjust the contrast value */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="contrasted-image"></div>
<div class="content">
<h2>Contrast Effect Example</h2>
<p>Adjust the contrast of images using the contrast() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we established the .contrasted-image class responsible for generating a container featuring a background image. Within this class, the contrast filter function is implemented to fine-tune the image's contrast. By altering the 1.8 value, users can effectively manage the contrast intensity. Subsequently, we defined the .content class, offering a background overlay with subtle transparency and rounded edges to present content seamlessly.
- hue-rotate
By leveraging this feature, we have the capability to adjust the tint of the material. The adjustment is based on the color enclosed within the color wheel. Additionally, we have the flexibility to specify the degree of rotation for the tint. Opting for a comparable angle value showcases a range of cool colors, while a larger angle input reveals warmer hues within the tint.
Syntax:
We can achieve this characteristic using the following syntax.
hue-rotate(angle)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hue Rotate Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.hue-rotated-image {
width: 300px;
height: 200px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvnZVHdfdXz5axWgtli0dB5d--VtwH_iSOMUIPx4IhWb2GuPo6cpAX-sYyNUjyq1pNPiA&usqp=CAU");
background-size: cover;
filter: hue-rotate(90deg); /* Adjust the hue rotation value */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="hue-rotated-image"></div>
<div class="content">
<h2>Hue Rotate Effect Example</h2>
<p>Adjust the hue of images using the hue-rotate() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the given code snippet, we've established the .hue-rotated-image class to generate a container containing a background image. The hue-rotate filter function is utilized to modify the hue of the image. By altering the value to 90deg, we can manage the degree of hue rotation as needed. Additionally, the .content class has been defined to offer a background with a subtle overlay effect and rounded corners, ideal for presenting content.
- adjusts the saturation level.
By utilizing this function, it becomes possible to adjust the saturation level of our content. Lowering the saturation value below 100% will result in desaturating the content, while exceeding 100% will enhance its saturation.
Syntax:
We can integrate this feature using the following syntax.
saturate(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saturation Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.saturated-image {
width: 300px;
height: 200px;
background-image: url("https://static.toiimg.com/thumb/msid-99593546,width-1280,height-720,resizemode-4/.jpg");
background-size: cover;
filter: saturate(150%); /* Adjust the saturation value */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="saturated-image"></div>
<div class="content">
<h2>Saturation Effect Example</h2>
<p>Adjust the saturation of images using the saturate() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we've established the .saturated-image class that generates a container featuring a background image. The saturate filter function is then utilized to modify the saturation of the image. To fine-tune the saturation level, the value of 150% can be adjusted accordingly. Following that, the .content class needs to be defined to offer a background with a subtle overlay effect and rounded corners for the presentation of content.
- grayscale filter function can be used for converting the colors to grayscale.
By utilizing this function, it becomes possible to convert our web page to grayscale. Lowering the grayscale percentage below 100% diminishes the grayscale effect, while raising it above 100% results in displaying the content entirely in grayscale. The default grayscale setting is initialized at 0%.
Syntax:
We can incorporate this characteristic using the following syntax.
grayscale(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grayscale Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.grayscale-image {
width: 300px;
height: 200px;
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/022/189/355/small/abstract-3d-podium-for-product-presentation-with-geometric-shapes-empty-round-podium-platforms-for-product-presentation-with-shadows-and-light-background-generative-ai-photo.jpg");
background-size: cover;
filter: grayscale(100%); /* Apply the grayscale effect */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="grayscale-image"></div>
<div class="content">
<h2>Grayscale Effect Example</h2>
<p>Apply a grayscale effect to images using the grayscale() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we've established the .grayscale-image class responsible for generating a container featuring a background image. The grayscale filter function is utilized to implement the grayscale effect. It is possible to customize the 100% value to regulate the intensity of the grayscale effect.
- invert
By utilizing this function, we have the ability to invert the color of the specified element. Adjusting the invert function's value allows for fine-tuning of this effect. Values below 100% reduce the impact on the element, while values above 100% intensify the effect. When applying the backdrop invert, the webpage's appearance mirrors that of a black body entirely.
Syntax:
We can incorporate this attribute using the following syntax.
invert(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invert Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.inverted-image {
width: 300px;
height: 200px;
background-image: url("https://media.istockphoto.com/id/1280270032/photo/drapery-fabric-with-stripes-3d-illustration-3d-rendering.jpg?b=1&s=612x612&w=0&k=20&c=EYlh2cgoN1SAAG0MaOBzfRoKVuVhw4zfgMgYSi39Fss=");
background-size: cover;
filter: invert(100%); /* Apply the invert effect */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="inverted-image"></div>
<div class="content">
<h2>Invert Effect Example</h2>
<p>Invert the colors of images using the invert() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we've established the .inverted-image class, responsible for generating a container featuring a background image. By utilizing the invert filter function, we can effectively reverse the colors of the image. It's possible to fine-tune the level of inversion by modifying the 100% value. Additionally, the .content class has been crafted to offer a background with a subtle overlay and rounded corners, specifically designed for content presentation.
- grayscale
By utilizing this function, we have the capability to transform the input image into a sepia tone. Sepia tone refers to enhancing the warmth of the image, giving it a more yellow or brown hue. It is also possible to adjust the intensity of the sepia effect by specifying a value. Values below 100% will lessen the impact on the image, while values above 100% will intensify the effect. The default value for sepia is 0%.
Syntax:
We can integrate this characteristic using the following syntax.
sepia(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sepia Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.sepia-image {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg");
background-size: cover;
filter: sepia(100%); /* Apply the sepia effect */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="sepia-image"></div>
<div class="content">
<h2>Sepia Effect Example</h2>
<p>Apply a sepia effect to images using the sepia() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we've established the .sepia-image class that generates a container featuring a background image. The sepia filter function is utilized to implement the sepia effect. By modifying the value to 100%, we can regulate the intensity of the sepia effect. Additionally, the .content class has been defined to offer a background with a subtle overlay and rounded edges for presenting content.
- drop-shadow
By utilizing this function, users can generate a shadow representation for the specified element. A drop shadow is a condensed rendition of the alpha mask extracted from the initial image, which has been specifically displaced and softened. This feature bears resemblance to the box-shadow attribute. Leveraging the filter property can enhance the efficiency of hardware operations.
Syntax:
We can incorporate this characteristic using the following syntax.
drop-shadow(offset-x offset-y blur-radius color)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Shadow Effect Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.element-with-shadow {
width: 200px;
height: 200px;
background-color: #3498db;
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2)); /* Apply the drop shadow effect */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="element-with-shadow"></div>
<div class="content">
<h2>Drop Shadow Effect Example</h2>
<p>Add a drop shadow to elements using the drop-shadow() filter function.</p>
</div>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we established the .element-with-shadow class to generate a square element featuring a blue background hue. The filter attribute then implements the drop-shadow filter function to incorporate a drop shadow effect. Customization of the shadow's offset, blur radius, and color can be achieved by adjusting the 4px 4px 8px rgba(0, 0, 0, 0.2) value. Additionally, the .content class was crafted to furnish a background with a subtle overlay and rounded edges for presenting the content.
- opacity
By utilizing this feature, we can introduce opacity to the image. Decreasing the value below 100% will lessen the impact on the element, while increasing it above 100% will completely alter the effect.
Syntax:
We can achieve this characteristic using the following syntax.
opacity(amount)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.opaque-element {
width: 200px;
height: 200px;
background-color: #3498db;
opacity: 0.7; /* Adjust the opacity value */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="opaque-element"></div>
<div class="content">
<h2>Opacity Example</h2>
<p>Control the opacity of elements using the `opacity` property.</p>
</div>
</body>
</html>
Output
Explanation:
In the previous example, we generated the .opaque-element class to produce a square element with a blue background shade. The opacity attribute is adjusted to 0.7, resulting in the element being 70% transparent. Subsequently, we established the
The .content class offers a background with a subtle overlay and rounded edges to present content in an aesthetically pleasing manner.
The url function is utilized to apply SVG filters.
By utilizing this feature, we can retrieve the file location in XML format. The XML document specifies the SVG filter and numerous anchor elements for a specific filter component.
Syntax:
We can achieve this characteristic by utilizing the following syntax.
url(common filters.svg#filter);
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Filter Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.filtered-element {
width: 200px;
height: 200px;
background-color: #3498db;
filter: url(#custom-filter); /* Reference the SVG filter by its ID */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="filtered-element"></div>
<div class="content">
<h2>SVG Filter Example</h2>
<p>Apply an SVG filter to an HTML element using the `url()` function.</p>
</div>
<!-- Define the SVG filter inline -->
<svg width="0" height="0" style="display: none;">
<filter id="custom-filter">
<!-- Define the filter effect here -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</svg>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we've established the .filtered-element class that generates a square component featuring a blue backdrop. The filter attribute employs the syntax url(#custom-filter) to point to an SVG filter identified as custom-filter. Subsequently, we've instantiated an SVG component within the HTML file, aligning it with the filter impact. Here, it administers a Gaussian blur with a deviation of 5 to the said element.
Adding Multiple Filters
We can also utilize the background filter property on various sections of the image. Furthermore, distinct filter properties can be implemented on the background of the element. The values accepted for the filter property are also valid for the backdrop property. Leveraging hardware support is possible as the browser engine is equipped to handle these filter operations.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Filters Example</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: 'Lato', sans-serif;
}
.filtered-element {
width: 200px;
height: 200px;
background-image: url("https://img.freepik.com/free-vector/metallic-3d-spheres-background_52683-28659.jpg"); /* Image URL */
background-size: cover;
filter: grayscale(50%) brightness(80%) contrast(120%); /* Apply multiple filters */
}
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h2 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.content p {
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<div class="filtered-element"></div>
<div class="content">
<h2>Multiple Filters Example</h2>
<p>Apply multiple filters to an HTML element with an added image.</p>
</div>
</body>
</html>
Output
Explanation:
In the provided code, we've defined the .filtered-element class that generates a square element with a background color of blue. The filter attribute implements various filter functions such as grayscale(50%), brightness(80%), and contrast(120%). These filter effects are sequentially applied based on their order in the list. The grayscale(50%) function decreases the color intensity by 50%, resulting in a grayscale appearance. By using the brightness(80%) function, the brightness of the element is enhanced to 80%. Lastly, the contrast(120%) function boosts the contrast of the element to 120%.