CSS Glassmorphism Generator (with Backdrop Blur)

Design frosted-glass CSS cards with live preview and copy-ready code

🔒 100% 브라우저 내🆓 평생 무료⚡ 가입 없음

참고: 아래 툴 인터페이스는 현재 영어로만 제공됩니다. UI는 하나씩 번역 중입니다. 이 툴을 영어로 보기 →

Blur: 20pxSaturation: 180%Background alpha: 0.25Border: 1px @ 0.35Border alpha: 0.35Radius: 20pxShadow: 24pxDark glass (translucent black)

Glass card

Frosted, saturated, alive

CSS

.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

Tailwind classes (closest match)

bg-white/25 backdrop-blur-xl backdrop-saturate-150 border border-white/35 rounded-2xl shadow-xl

사용법

1
Pick a background
Choose a preset gradient or drop your own image - the glass sits on top.
2
Tune the sliders
Blur, saturation, background alpha, border, radius, shadow - the preview updates instantly.
3
Copy the CSS
Paste into your stylesheet or Tailwind arbitrary-values ([backdrop-filter:blur(20px)]).

CSS Glassmorphism Generator (with Backdrop Blur) 소개

Free CSS glassmorphism generator. Design frosted-glass cards with live sliders for blur, saturation, background transparency, border, and shadow - over your own background image or a preset. Copy production-ready CSS with vendor prefixes. 712 Tools의 CSS Glassmorphism Generator (with Backdrop Blur)은 최신 JavaScript API를 사용해 여러분의 browser에서 완전히 동작합니다 - server가 여러분의 데이터를 볼 일이 절대 없습니다. 즉, 즉각적인 결과, 완전한 프라이버시, 그리고 업로드 제한이 없습니다.

debugging 세션, 빠른 sanity check, 또는 프로덕션 인시던트 - 어떤 상황이든 이 툴은 원하는 만큼 무료로 사용할 수 있습니다. 워터마크 없음, 가입 없음, 툴 내 광고 없음.

자주 묻는 질문

Do all browsers support backdrop-filter?

Yes on Chromium, Safari, and modern Firefox. Older Firefox needs a fallback background color - the generated CSS includes one.

Why is my glass showing solid?

backdrop-filter only works when the element has translucent background. Keep the background alpha below 1 and make sure there's actual content behind the card.

Does this work in Tailwind?

Yes - Tailwind ships backdrop-blur-* utilities. The generator shows both raw CSS and the closest Tailwind class combo.

더 읽기

5 분 소요

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 분 소요

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine