CSS 글래스모피즘 생성기

CSS로 젖빛 유리 효과 만들기

브라우저 처리데이터가 브라우저를 떠나지 않습니다

Glass Effect Settings

Blur16px
Transparency20%
Saturation180%
Border Radius16px
Border Width1px

Colors

Glass Tint
Border Color
Shadow Color
Text Color

Enable Shadow

Shadow Blur
Shadow Spread

Preview

Glassmorphism

A modern UI design trend that creates a frosted glass effect using backdrop filters and transparency.

Button

CSS

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0px rgba(0, 0, 0, 0.2);
}

Presets

About CSS 글래스모피즘 생성기

CSS로 젖빛 유리 효과 만들기

Use this free online css 생성기 tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.