JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="glass-container02">
  glass-container
</div>

CSS

html, body {
  min-height: 100%;
}
body {
  background: rgb(238,238,238);
  background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(53,177,162,1) 100%);
  background-size: 100% 100%;
}
* {
  box-sizing: border-box;
}

/* 라인에 그라데이션이 있는 경우 */
.glass-container02 {
  position: relative;
  padding: 80px;
  margin: 30px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 30px;
  
}
.glass-container02::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border-radius: 30px; /*1*/
  border: 3px solid transparent; /*2*/
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) border-box; /*3*/
  -webkit-mask: /*4*/
     linear-gradient(#fff 0 0) padding-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /*5'*/
          mask-composite: exclude; /*5*/
}