Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create blurred picture or text with CSS Filters
Users find a website with a blurred background to be visually good-looking. But have you ever considered how this blur is made specifically? Well, it's quite easy. Let's look at how to use the CSS background blur property to do it. Using CSS filters to generate blurred effects on images or text is a common web development method to improve visual appeal or achieve certain design sensibilities. The rendering of items on a webpage can be altered, including blurring, with CSS filters.
When using the CSS filter: blur() property on images, make necessary adjustments to the blur radius. For example, filter: blur(6px);. Use the same property to get a blurred text effect for text. These easy methods improve the look of your webpage by highlighting important components. To achieve the ideal balance for your design, experiment with various blur settings.
The filter property's blur function gives the source image a Gaussian blur. The radius determines the magnitude of the standard deviation to the Gaussian function, or how many pixels on the screen blend into one another. The value 0 is used if no parameter is provided. Although a CSS length is provided for the parameter, percentage values are not permitted.
Example
Let's look at the following example, where we are going to use the blurry text with effects
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
display: inline-block;
padding: 10px 20px;
margin: 10px auto;
letter-spacing: 3px;
background-color: #A569BD;
}
#tp span:nth-child(1) {
color: #FBFCFC;
font-size: 32px;
font-family: verdana;
}
#tp span:nth-child(2) {
color: #FBFCFC;
text-shadow: 0 0 4px #fff;
font-size: 33px;
font-family: verdana;
}
#tp span:nth-child(3) {
color: #FBFCFC;
text-shadow: 0 0 5px #fff;
font-size: 34px;
font-family: verdana;
}
#tp span:nth-child(4) {
color: #FBFCFC;
text-shadow: 0 0 6px #fff;
font-size: 35px;
font-family: verdana;
}
#tp span:nth-child(5) {
color: #FBFCFC;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: verdana;
}
</style>
</head>
<body>
<div id="tp">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of text with some blur effects on the webpage.
Using filter property
You can apply visual effects and transformations to elements by changing how their content is rendered with the CSS filter property. You can use this property to change an element's look by modifying its color, brightness, contrast, blur, and other characteristics. You may use the filter property with other HTML components as well as images.
Syntax
Following is the syntax for CSS filter property
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Example
Following is the example, where we are going to create blurry image with filter property.
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
filter: blur(3px);
}
body {
text-align: center;
background-color: #E8DAEF;
}
</style>
</head>
<body>
<div id="tp">
<img src="https://www.tutorialspoint.com/cg/images/logo.png">
</div>
</body>
</html>
On running the above code,the output window will pop up, displaying the blurred image on the webpage.
Using text-shadow property
The CSS text shadow is a property, which will add the shadow to text. A list of shadows that can be applied to your text will be accepted by the property. It can also be animated, which is a significant feature as it can make your website more visually appealing.
Syntax
Following is the syntax for CSS text-shadow property −
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Example
In the following example, we are going to create a blurry text with the text-shadow property.
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
font-size: 45px;
font-family: verdana;
color: transparent;
text-shadow: 0 0 9px #DE3163;
}
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<div id="tp">TUTOIALSPOINT</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the blurred text displayed on the webpage.
110 Views
