How to create a Modern Translucent background without using Tailwind CSS

#webdev #css #tutorial #productivity

Tailwind CSS and all modern designs have awesome modern backgrounds that are translucent. They make web applications look even cooler!

For those who are learning how to use Tailwind or just don't want to use Tailwind, here is the way that you can achieve the same background look without using Tailwind CSS instead you can just use regular HTML and CSS.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Translucent background without using Tailwind CSS</title>
</head>

<body>
  <div class="bdrop-container">
    <div class="backdrop"></div>
  </div>
</body>

</html>

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(30px);
  background: linear-gradient(40deg, #f9a8d4, #c026d3, #5b21b6, #4f46e5);
  opacity: 0.1;
}
.bdrop-container {
  position: relative;
  z-index: 1;
}

Check the codepen - Modern Translucent Background with HTML and CSS

If want to know more about such hacks then you can use Stack UI