Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Buttons

Pro

Glass Button for React

A translucent button that blurs whatever sits behind it, like frosted glass. For React with Base UI, when a button sits on a photo, a video or a gradient.

Framework
UI library

The Glass Button lets the backdrop show through, softened by a blur. A light edge along the top, a soft shadow under it and a fine border keep its shape clear on any background, and on hover or keyboard focus light gathers along the top of the glass.

Use it over imagery, on a hero, a photo, a video or a bold gradient, where a solid button would look pasted on. On a plain page background there's nothing to blur, so it reads as a quiet outline button; use a regular Button there. It wraps the Button, so size works as usual, and tint takes the place of variant. It's CSS only: a translucent fill, a backdrop-filter, and a sheen that fades in by an opacity transition, with no JavaScript and no animation library. Nothing moves; with reduced motion the sheen appears at once.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { GlassButton } from "@/components/ui/glass-button";
<GlassButton>Watch the film</GlassButton>

Demos

Blur

blur sets how much of the backdrop survives: subtle (8px) keeps shapes recognizable, medium (12px, the default) turns them into soft color, and strong (24px) leaves only the tone. A busy backdrop behind a small label wants more blur.

Preview width

Tint

tint="primary" tints the glass with the primary color and switches the label to the primary foreground color, for the one action a hero leads to. The default, neutral, tints it with the page's background color, light in light mode and dark in dark mode.

Preview width

Accessibility

The button is announced and activated as any Button; the glass is only styling. Keep its label short and check it against the busiest part of the backdrop: the tint is there so text stays readable, and strong blur or tint="primary" helps where the backdrop has strong contrast.

Enter
Activate the button.
Space
Activate the button.

FAQ

Why does it look like a plain outline button?

Because there's nothing behind it to blur. The effect needs a photo, a video or a gradient underneath; the Blur demo puts it on stripes so you can see it work.

How do I make the blur stronger?

Pass blur="strong" for 24px, or blur="subtle" for 8px. The default, medium, is 12px.

Does it work in dark mode?

Yes. The neutral tint is the page's background color, so the glass is milky in light mode and smoky in dark mode. The light top edge and the shadow swap colors with the mode, so the top edge always looks lit.

Can I use another variant?

No: the glass is always drawn on the ghost Button, so no variant's fill or hover color fights the tint, and there's no variant prop. For a colored glass use tint="primary".

Is backdrop blur slow?

Not for a few buttons: browsers draw it on the GPU. If a page shows many of them over video on low-end devices, use blur="subtle", which is cheaper.

What if a browser doesn't support backdrop blur?

The translucent tint still draws, so the button still has a fill, a border and readable text; only the blur is missing.

API Reference

GlassButton

data-slot="glass-button-sheen"

PropType
blur?"subtle" | "medium" | "strong"

How much the glass blurs what's behind it: subtle is 8px, medium 12px and strong 24px.

Type
"subtle" | "medium" | "strong"
Default
"medium"
children?ReactNode

The label, on the glass.

focusableWhenDisabled?boolean

Whether the button should be focusable when disabled.

Default
false
nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default
true
tint?"neutral" | "primary"

The glass's tint, in place of a variant: the page's background color, or the primary color for the main action on a busy backdrop.

Type
"neutral" | "primary"
Default
"neutral"
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--glass-button-lightstring

The color of the top edge and the sheen (the page's background; its text color in dark mode).

--glass-button-shadowstring

The color of the shadow under the glass (the page's text color; its background in dark mode).

All 35 buttons