Live PreviewCopy CSSCustom BackgroundFree

Glass Card

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

How It Works

1

Adjust Controls

Set blur, transparency, border width, and background color.

2

Preview

See the glassmorphism effect update in real time.

3

Copy CSS

Click Copy to get the CSS code for your project.

Frequently Asked Questions

What is glassmorphism?
Glassmorphism is a UI design trend that uses frosted-glass effects with blur, transparency, and subtle borders to create depth.
What CSS properties are used?
backdrop-filter: blur(), background with rgba transparency, and a subtle border create the glass effect.
Is it supported in all browsers?
backdrop-filter is supported in Chrome, Edge, Safari, and Firefox. Older browsers may not show the blur effect.
Can I upload a background image?
Yes. Upload a background image to test how the glass effect looks over different content.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools