版权声明：本文为博主原创文章,转载文章留个版权就行了

 例：本文章转载博客小枫网络（注意表明原创地址）

HTML+CSS复刻毛玻璃效果

不得不说大佬确实牛批

源图地址:https://www.xfabe.com/post/10.html

HTML部分

<div class="out">

  <div class="circle"></div>

  <div class="wrapper">

    <div class="noise"<div class="out">

  <div class="circle"></div>

  <div class="wrapper">

    <div class="noise"></div>

    <p class="title">TITLE</p>

    <p class="subtitle">HelloWorld</p>

    <p class="postscript">Code By DAIDR</p>

  </div>

  <svg id="filter">

    <filter id="white_noise">

      <feTurbulence baseFrequency="0.70"  />

      <feColorMatrix type="matrix" values="

1 1 1 0 0,

1 1 1 0 0,

1 1 1 0 0,

0 0 0 1 0"/>

    </filter>

  </svg>

</div>></div>

    <p class="title">TITLE</p>

    <p class="subtitle">HelloWorld</p>

    <p class="postscript">Code By DAIDR</p>

  </div>

  <svg id="filter">

    <filter id="white_noise">

      <feTurbulence baseFrequency="0.70"  />

      <feColorMatrix type="matrix" values="

1 1 1 0 0,

1 1 1 0 0,

1 1 1 0 0,

0 0 0 1 0"/>

    </filter>

  </svg>

</div>

CSS部分

html {

  background: #000;

}

* {

  box-sizing: border-box;

}

.circle {

  width: 300px;

  height: 300px;

  background-image: linear-gradient(170deg, #54ffef 0%, #3e35bb 100%);

  border-radius: 100%;

  position: absolute;

}

.out {

  position: relative;

  margin: 50px;

  width: 300px;

  height: 300px;

}

.wrapper {

  background: rgba(255,255,255,0.2);

  position: absolute;

  width: 350px;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%) rotate(30deg);

  padding: 10px 20px;

  box-shadow: inset 5px 5px 20px 0px rgba(255,255,255,0.1);

  border-radius: 20px;

  color: rgba(255,255,255,0.7);

  backdrop-filter: blur(7px);

  border-bottom: 3px solid rgba(255,255,255,0.3);

  border-right: 1.5px solid rgba(255,255,255,0.3);

  overflow: hidden;

  filter: brightness(1.1);

}

.noise {

  position: absolute;

  top:0;

  left:0;

  right:0;

  bottom:0;

  filter: url(#white_noise);

  opacity:0.1;

}

.wrapper {

  background: rgba(255,255,255,0.2);

  position: absolute;

  width: 350px;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%) rotate(30deg);

  padding: 10px 20px;

  box-shadow: inset 5px 5px 20px 0px rgba(255,255,255,0.1);

  border-radius: 20px;

  color: rgba(255,255,255,0.7);

  backdrop-filter: blur(7px);

  border-bottom: 3px solid rgba(255,255,255,0.3);

  border-right: 1.5px solid rgba(255,255,255,0.3);

  overflow: hidden;

  filter: brightness(1.1);

}

.noise {

  position: absolute;

  top:0;

  left:0;

  right:0;

  bottom:0;

  filter: url(#white_noise);

  opacity:0.1;

}

p {

  margin: 0;

  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);

  font-weight: 900;

  user-select: none;

}

.title {

  font-size: 30px;

  margin-bottom: 35px;

}

.subtitle {

  font-size: 20px;

  margin-bottom: 5px;

}

.postscript {

  font-size: 12px;

}

大佬的codepen: https://codepen.io/DaiDR/pen/qBxyEZP