JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div class="header">
  <ul>
    <a href=""><li>Dont Blured</li></a>
    <a href=""><li>By 50px</li></a>
    <a href=""><li>Only 3px</li></a>
  </ul>
</div>
</body>
</html>

CSS

body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}