CSS Focus Blur Text on Hover

byCodingFlicks -December 14, 2023

0

To enhance the visual appearance of websites web developers sometimes apply some styling techniques to the text content of a website. These Text effects make any website more engaging and aesthetically pleasing. Today we will create a simple text focus blur effect on hover using HTML and CSS. Below there is a video tutorial about this CSS Blur Text Effect. You can Watch the video tutorial below to get some idea. If you like our content, you can subscribe to our YouTube Channel.

Video Tutorial:

We Hope you have watched the CSS Focus Blurry Text on Hover tutorial. CSS Text Focus Blur Effect is a special CSS text effect achieved by applying a blur filter to text elements when they are in focus or hovered over. This kind of text focus blur effect can be created using the :focus and the :hover pseudo-classes along with the filter property of CSS. If we apply a transition effect on focus or being hovered, the animation will be more eye-catching. We Can use this kind of effect in inputs, links, or any other text-based elements of a website. CSS Text Focus Blur Effects are used to enhance user Experience, Aesthetic Appeal, Interactive Design Elements, etc.

You May Also Like:

CSS Focus Blur Text on Hover [ Source Code ]:

In order to create the CSS blur background with text snippet, you need to create one HTML file and One CSS File. Copy the code from the code boxes below and paste them into your project. You can also download the code from the below download button if you want.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <title>Focus Blurred Text On Hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <h2>Blurred Text</h2>
    </div>
</body>
</html>

ADD CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.wrapper{
    height: 100vh;
    background: url("1.jpg") center center fixed;
    background-size: cover;
}
.wrapper h2 {
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	font-family: montserrat;
	text-transform: uppercase;
	color: #ffffff;
	font-size: 80px;
	letter-spacing: 8px;
	cursor: pointer;
	filter: blur(10px);
	transition: 0.7s all;
}
.wrapper h2:hover{
    filter: blur(0);
}

We hope the code is working. We have many more projects on CSS animation, Full Website Design, and Javascript projects on our website. If you want to get those and many more, click on the load more button on our Homepage. Thank you for visiting our website today.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.