Generate Frosted Glass Card CSS
Build a frosted glass card by tuning blur, transparency, border, and shadow over a live gradient preview. The output includes the -webkit- prefix Safari needs.
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
- 1Set the background opacity around 0.1 to 0.2
- 2Set the blur between 8px and 24px
- 3Add a translucent border and soft shadow
- 4Copy the CSS with backdrop-filter and the webkit prefix
More Generate Tools
All generators →Generate a Glassmorphism Navbar CSS
Create a translucent glassmorphism navbar and copy the CSS. Free online glass navbar generator with blur and fallback, no signup.
Generate a Neumorphic Soft UI Button CSS
Create a soft UI neumorphic button with dual box shadows and copy the CSS. Free online neumorphism button generator, no signup.
Generate JSON Schema from an API Response
Paste a JSON API response and generate a valid JSON Schema for validation. Free online JSON Schema generator, runs in your browser.
Generate an HTML Email Signature for Gmail
Create a professional HTML email signature with social icons and a logo for Gmail. Free online email signature generator, no signup.
Generate a Code 128 Barcode from Text
Generate a scannable Code 128 barcode from any text, SKU, or product code online for free. Download as PNG for labels and inventory, no signup.
Generate a Barcode for Product Labels
Make a Code 128 barcode for product labels, inventory, and shipping online for free. Download a print-ready PNG with adjustable size, no signup.
Looking for FAQs and advanced options? Visit the full Glassmorphism Generator page →