win-j 로고
자유로운 블로그

Developer Design Utility

Glassmorphism Generator

Create glass-style Glassmorphism CSS by adjusting opacity, backdrop blur, border, radius, shadow, and preview the result in real time.

Create Glass UI Combine translucent backgrounds and blur effects to create glass-style UI cards.
Live Preview Opacity, blur, border, radius, and shadow values are reflected instantly in the preview card.
Copy CSS Code Copy the completed glassmorphism CSS or download it as a CSS file.
Blur 18px
Opacity 22%
Border 34%
Radius 28px
STEP 1

Glassmorphism Settings

Adjust background color, opacity, blur, saturation, border, and shadow values to create your desired glass effect.

Base background color of the glass card. White is suitable for classic Glass UI, while colors work well for accent cards.

0% 22% 100%
0px 18px 40px
100% 160% 220%
0% 34% 100%
0px 28px 60px
0% 18% 80%
16px 32px 64px
Live Preview
Glass UI Glassmorphism Card

Check transparent glass texture and blur effects in real time.

Blur 18px
Opacity 22%
Radius 28px
STEP 2

Recommended Presets

Quickly apply glassmorphism combinations commonly used for cards, banners, modals, and dark background UI.

Basic Glass UI

Color Glass UI

Special Styles

STEP 3

Generated Result

Use the code below in CSS files, component styles, or inline styles.

Ready 
Select settings, then click the Generate CSS Code button.

Help

What is Glassmorphism?

Glassmorphism is a UI style that creates a glass-like surface using a translucent background, blur, subtle border, and shadow. It is often used for cards, modals, banners, dashboards, profile boxes, and overlay panels.

How to Use

  1. Adjust glass color, background opacity, backdrop blur, and saturation.
  2. Tune border opacity, radius, shadow, and padding to shape the card depth.
  3. Check the glass texture and text readability over the preview background.
  4. Generate the CSS code, then copy the result or download it as a CSS file.
Core CSS Properties backdrop-filter Blurs the background behind the element
Recommended Values General glass card: Opacity 16%–28%, Blur 14px–24px
Notes Glassmorphism works better on gradients, images, and patterned backgrounds than on flat solid backgrounds. For readability, avoid making the background too transparent.
What should I do if the glass effect is not visible enough?

Place a gradient or image with visible color contrast behind the card. Increasing the blur value and border opacity can also make the glass effect more noticeable.

How can I improve text readability?

Increase background opacity or use a darker text color. Very transparent glass cards can look attractive, but they may reduce readability in real interfaces.

Does backdrop-filter work in every browser?

Most modern browsers support it, but some environments may have limitations. Including -webkit-backdrop-filter together is recommended.