Generate Glassmorphism CSS Online
Design trendy glassmorphism effects with adjustable blur, transparency, and border settings. Preview on custom backgrounds and copy the CSS code for your UI components.
Glassmorphism Generator
Create glass-effect CSS styles with blur and transparency
Glass Card
Glassmorphism UI
A frosted glass effect created with backdrop-filter and transparency.
Browser support: backdrop-filter works in all current browsers. Safari needs the -webkit- prefix (included above). If a browser does not support it, the blur is skipped and only the translucent background shows, so keep enough contrast for text to stay readable. Add a fallback like @supports not (backdrop-filter: blur(1px)) with a more opaque background for older targets.
rgba(255, 255, 255, 0.15)
blur(12px) saturate(180%)
1px solid rgba(255, 255, 255, 0.20)
0px 8px 32px 0px rgba(0, 0, 0, 0.10)
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
}bg-[rgba(255,_255,_255,_0.15)] backdrop-blur-[12px] backdrop-saturate-[1.8] border border-[rgba(255,_255,_255,_0.20)] rounded-[16px] shadow-[0px_8px_32px_0px_rgba(0,0,0,0.10)]Uses Tailwind's arbitrary value syntax (v3+). The backdrop-blur and backdrop-saturate utilities already emit the -webkit- prefix for you.
style={{
background: 'rgba(255, 255, 255, 0.15)',
backdropFilter: 'blur(12px) saturate(180%)',
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
border: '1px solid rgba(255, 255, 255, 0.20)',
borderRadius: '16px',
boxShadow: '0px 8px 32px 0px rgba(0, 0, 0, 0.10)'
}}Quick Start
- 1Adjust the blur intensity and transparency
- 2Set border and shadow properties
- 3Preview the glass effect on different backgrounds
- 4Copy the CSS code with backdrop-filter
More Generate Tools
All generators →Generate Neumorphism CSS Online
Create soft UI neumorphic styles with dual box-shadows. Free online neumorphism generator with live preview.
Edit SVG Paths Online
Edit SVG path data and Bezier curves with a visual editor. Free online SVG path editor with live preview.
Generate Color Shades & Tints Online
Generate lighter and darker shades of any color. Free online color shade generator for designers.
Generate URL Slugs Online
Convert any text into clean, SEO-friendly URL slugs. Free online slug generator.
Generate Barcodes Online - Code128, EAN, UPC
Generate barcodes in Code128, EAN-13, UPC-A, and other formats. Free online barcode generator with download.
Generate a Changelog Online - Keep a Changelog Format
Generate a CHANGELOG.md file in Keep a Changelog format. Free online changelog generator for open-source projects.
Looking for FAQs and advanced options? Visit the full Glassmorphism Generator page →