Is the Glassmorphism Buttons Generator free?

Yes. It’s completely free to use with no sign-up or installation required.

What code formats can I export?

You can export production-ready CSS, SCSS variables, Tailwind configuration snippets, and a React component.

Can I preview hover and disabled states?

Yes. The live preview shows normal, hover, and disabled states so you can fine-tune interactions.

Which browsers support the glass effect?

Chrome, Edge, and Safari support backdrop-filter. Firefox may require enabling the layout.css.backdrop-filter.enabled flag.

🔘 Glassmorphism Buttons Generator

Design glassmorphic buttons with live blur, opacity, border, radius, shadow and hover controls. Preview normal/hover/disabled states and export CSS, SCSS, Tailwind or React code.

🎨 Button Presets & Controls

Button Presets

Button Settings

Button Text

Button Size

Glass Properties

Blur Strength 10px

Background Opacity 0.1

Border Opacity 0.2

Border Width 1px

Border Radius 10px

Shadow Blur 32px

Hover Effects

Hover Opacity Increase 0.1

Hover Transform (Y) -2px

Colors

Background Color

Text Color

Border Color

Options

Add Icon (➜)

Full Width Button

👁️ Live Preview

Normal State

Hover State (Hover Me)

Disabled State

Generated Code

📚 How To Use

Choose a Preset

Select from 10 button presets including Primary, Secondary, Outline, Ghost, Success, Danger, and more. Each preset has unique glass properties.

Customize Properties

Adjust blur, opacity, borders, shadows, colors, and hover effects. Change button text and size (small, medium, large). Add icons or make it full-width.

Preview All States

See your button in normal, hover, and disabled states. The live preview shows exactly how your button will look and behave in different states.

Export Your Code

Get CSS, HTML, SCSS, Tailwind config, or React component code. Includes all states (hover, active, disabled) and responsive styles. Copy and paste directly!