Share

Glassmorphism CSS Generator

Free

Build frosted-glass effects with live preview and copy-ready CSS.

Rate this tool

About Glassmorphism CSS Generator

Design beautiful frosted-glass UI elements with live preview. Tune blur, transparency, border, saturation, and shadow until it looks just right — then copy the generated CSS. Includes ready-to-paste Tailwind v4 utilities and vanilla CSS, with full RTL support.

glassmorphismfrosted glasscss generatorbackdrop-filterblurmodern ui

Share this tool

Share

Related Tools

Free

CSS Gradient Generator

Visually build CSS gradients and copy the CSS output.

cssgradient

More Design Tools

View all

Free

CSS Minifier

Remove whitespace and comments to minify CSS code.

cssminify

Popular Tools

Free

Text to DOCX Generator

Convert plain text or Markdown into a downloadable Word .docx file.

text to docxtext to word

Free

CSS Box Shadow Generator

Visually create CSS box shadows with live preview and one-click copy.

cssbox shadow

Free

CSS Border Radius Generator

Design custom CSS border radius shapes with live preview.

cssborder radius

Free

Color Converter

Convert colors between HEX, RGB, and HSL formats.

colorhex

Free

Favicon Generator

Upload an image and get all favicon sizes + HTML link tags.

faviconfavicon generator

Free

Placeholder Image Generator

Generate custom placeholder images with any size, color, and text.

placeholderplaceholder image

Free

Image Color Extractor

Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.

image color extractorextract colors from image

Free

Code Screenshot Generator

Turn code snippets into beautiful shareable images.

codescreenshot

Free

URL List Playlist

Create shareable URL playlists with live iframe preview and password protection.

urlplaylist

0cr

SMM Panel

Buy social media marketing services — followers, likes, views and more.

smmsocial media

Free

What Is My IP

See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.

what is my ipmy ip address

Free

Relaxing Ambient Sounds

Relax and focus with browser-synthesized ambient sounds — rain, ocean, fire, forest, and more.

ambientrelaxing

Free

Screen Recorder

Record your screen directly in the browser. Download as WebM video.

screen recorderscreen capture

Free

Mood Tracker

Log daily moods with notes and tags, visualize trends with charts and heatmaps.

mood trackermental health

Free

Post Image Generator

Design stunning post covers & social cards with live canvas preview — fully customizable.

post imageog image

Dark glass

Frosted Glass

Tune your glass card

Adjust the sliders below to dial in the perfect frosted glass effect. Copy the CSS or Tailwind classes when you're happy.

Blur16px

Transparency0.25

Saturation180%

Border radius20px

Border opacity0.18

Shadow depth32px

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

Tailwind utilities

bg-white/25 rounded-[20px] backdrop-blur-[16px] border border-white/18 shadow-2xl

Note: backdrop-filter requires a Safari-prefixed fallback — already included. Glass effects look best over busy backgrounds (gradients, photos, mesh).