How to create Animated Blur Navbar using CSS?

The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That’s why it is really important to have a well-designed navigation bar or menu. So today we will be looking at a navbar in which all the elements get blur except the hovered-element.

Approach: The approach is to use blur() function and hover selector to blur all the elements except the hovered one.

HTML Code: Here, we have created a simple unordered list with 3 list-items.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Blured Menu Design</title>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact Us</li>
    </ul>
</body>
</html>

chevron_right


CSS Code: For CSS, follow these steps.