Blur distance means blur the border of an element and set its distance using CSS. In this article, we will see how to set the blur distance using CSS for styling the blur distance on the HTML element.
You can use box-shadow property which gives a shadow-like effect to the frames of an element.
Syntax:
box-shadow: h-offset v-offset blur color;
Property Value:
- h-offset: Horizontal shadow value.
- v-offset: Vertical shadow value.
- blur: To Blur the shadow.
Example 1: In this example, we will add blur distance effect on the div element.
HTML
<!DOCTYPE html> <html>
<head>
<style>
h2 {
color: green;
}
div {
width: 500px;
height: 250px;
border: 3px solid #4CAF50;
background-color: #4CAF50;
position: center;
box-shadow: 10px 10px 10px black;
}
div:hover {
background-color: #3e8e41
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>Box-shadow blur</div>
</body>
</html>
|
Output:
Example 2: In this example, we will add blue distance property to two different div elements.
HTML
<!DOCTYPE html> <html>
<head>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 28px 20px;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1>
</div><br><br>
<div class="gfg2">
A computer Science portal
</div>
</body>
</html>
|
Output: