Which CSS properties make up the glassmorphism effect?

Primarily backdrop-filter (for the blur), a semi-transparent background color, and typically a subtle border — this tool coordinates all of them together.

Does backdrop-filter work in all browsers?

Support is broad across modern browsers, though it's worth checking current compatibility for any browsers you specifically need to support, since backdrop-filter had a slower rollout than more basic CSS properties.

Can I adjust the blur intensity?

Yes, blur amount, background opacity and border styling are all independently adjustable.

Does Glassmorphism Generator upload my files to a server?

No. Glassmorphism Generator runs entirely in your browser using on-device processing, your files never leave your device.

Glassmorphism Generator

Design a frosted-glass CSS card effect and copy the code.

Runs in your browser

Glass card

Blur

Background opacity

Border opacity

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

About this tool

The frosted-glass "glassmorphism" effect — a translucent, blurred card over a background — combines several CSS properties (backdrop-filter, background opacity, border) that need to be tuned together to look right, and getting that combination right by writing CSS blind is slow. This tool lets you design a glassmorphism card effect visually and copy the generated code, letting you tune the combined effect visually instead of guessing at property values.

Frequently asked questions

Neumorphism Generator

Design a soft-UI neumorphic CSS shadow effect and copy the code.

CSS Box Shadow Generator

Design a CSS box-shadow visually and copy the code.

File Converter

Convert data files between CSV, JSON and TSV.

Hot

JSON Formatter

Format, validate and minify JSON.

Base64 Converter

Encode or decode text and files as Base64.

Base32 Encoder/Decoder

Encode or decode text as Base32.

ULID Generator

Generate sortable, timestamp-based ULIDs.

Semver Parser/Comparator

Parse and compare two semantic version numbers.

.env File Parser/Validator

Parse a .env file and flag duplicate keys, missing values and invalid names.

Markdown Table Generator

Build a Markdown table with a spreadsheet-style editor.

CSS Grid Generator

Visually build a CSS Grid layout and copy the code.

CSS Flexbox Generator

Visually build a CSS Flexbox layout and copy the code.

PDF Tools

Merge, split, compress and convert PDF files.

Image Tools

Compress, resize, crop and convert images.

Link & QR Tools

Shorten links and generate QR codes and barcodes.

Audio Tools

Convert audio files and turn text into speech, or speech into text.

Video Tools

Compress and process video files, right in your browser.

SEO & Web Tools

Meta tags, sitemaps, schema markup and other on-page SEO utilities.

Data & Spreadsheet Tools

Clean, convert and inspect CSV, TSV and tabular data.

File Tools

Archive, inspect and convert files, right in your browser.

Business Tools

Invoices, quotations, receipts and other business documents.

Social Media Tools

Resize images for social platforms, count hashtags and preview posts.