css 글래스모피즘 효과

간단하게 만들어봤다.

https://hype4.academy/tools/glassmorphism-generator

원하는 수치를 알려준다.

const CardContent = styled.div`
  background: rgba( 255, 255, 255, 0.1 );
  box-shadow: 0 8px 32px 0 rgba( 255, 255, 255, 0.17 );
  backdrop-filter: blur( 20px );
  -webkit-backdrop-filter: blur( 20px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  color:white;
  padding:30px;
  border-radius:20px;
  overflow: hidden;
`

클레이모피즘

https://hype4.academy/tools/claymorphism-generator

  backdrop-filter: blur(5px);
  background-color: #2e71ff;
  border-radius: 60px;
  box-shadow: 0px 25px 68px 0px rgba(82, 162, 255, 0.7), inset 0px -9px 16px 0px rgba(0, 83, 186, 0.9), inset 0px 11px 28px 0px rgb(255, 255, 255, 0.4);