Glass Button CSS Generator (Glassmorphism Pill)

+100 Tools
100% Free
0 Pop-up Ads
No Sign-up
Runs locally

Related Tools

Color Contrast Checker (WCAG)

Contrast ratio for two colors with AA/AAA pass or fail.

Color Palette Extractor

Pull dominant, vibrant and muted colors from an image.

CSS Gradient Generator

Build linear or radial gradients with live CSS output.

HEX to RGB Color Converter

Convert between HEX, RGB, HSL and CMYK.

Glass Button CSS

Design frosted-glass UI cards with CSS or Tailwind output.

About this option

A glass button is a small frosted pill that sits quietly on a hero image or gradient. This page opens the generator with a fully rounded corner radius, light blur and a slightly stronger border so the shape reads clearly at small sizes.

When to use it

Call-to-action buttons over images and gradients
Navigation pills, tags and badges
Floating controls on a media player or map

How to use it

1Open the page — the pill-shaped glass preview is already set
2Adjust blur and transparency to taste
3Copy the CSS and apply it to your button, adding padding and text colour

Frequently asked questions

How do I make the pill shape?

Use a large `border-radius` — at least half the button's height — such as 48px.

Do I need padding?

Yes. The generator styles the glass surface; add padding such as `0.75rem 1.5rem` for a button.

Will it work on a solid background?

It looks best over images or gradients, because the blur needs content behind it to show.