Tailwind ToolsNo account required

Tailwind Glassmorphism Generator

Q: Can I copy standard CSS?

Yes. The tool provides Tailwind classes and equivalent CSS for non-Tailwind projects.

Generate glassmorphism Tailwind classes for blur, transparent backgrounds, borders, and radius.

Open the glassmorphism workspace

Tailwind workspace

Use Glassmorphism

Add your input, choose the available settings, and review the result before using it.

Controls

Blur

18px

Background opacity

18%

Radius

18px

Border opacity

32%

Glass panel

Preview the generated blur, opacity, border, and radius settings.

Tailwind classes

backdrop-blur-[18px] bg-white/[0.18] border border-white/[0.32] rounded-[18px] shadow-lg

CSS

background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);

Simple workflow

How to use Tailwind Glassmorphism Generator

01
Add your input
Enter values, paste content, or choose files in the workspace.
02
Choose your settings
Adjust the available options to match the result you need.
03
Review the result
Check the output before you copy or download it.

Before you use the result

Review generated code and styles in your own project context before using them in production.