Cards and surfaces

Glass, Solid, Outline and Floating cards, opacity, blur, corners, borders and shadows, and how they interact.

Where: Your look → Colors & fonts → Cards & surfaces

These settings shape the main card and everything drawn like it: link buttons, Discord and Roblox cards, wallet cards, the guestbook, extra sections and the music player.

Surface treatment

Glass, Solid, Outline, Floating

Default: Glass

Glass: your Card color, see-through and blurred. Solid: the Card color at full strength, no blur. Outline: no fill at all, just an outline in your Text color. Floating: like Glass, but without a border.

Works on: Identity, After Dark, Bento, Panel · partly Spotlight, Editorial, Terminal, Old Web

Shadow

None, Soft, Dramatic, Accent glow

Default: Dramatic

Depth behind the card. Accent glow uses your Accent color.

Works on: Identity, After Dark, Bento, Panel · partly Spotlight, Editorial, Terminal, Old Web

Card opacity

0–100%

Default: 72%

How solid the Card color is on Glass and Floating cards.

Works on: Identity, After Dark, Bento, Panel · partly Spotlight, Editorial, Terminal, Old Web

Glass blur

0–60px

Default: 30px

How much the background behind a Glass or Floating card is blurred.

Works on: Identity, After Dark, Bento, Panel · partly Spotlight, Editorial, Terminal, Old Web

Corner radius

0–64px

Default: 34px

Rounding of the card corners. Bento also uses it for your picture. Links have their own Radius in Fine tune.

Works on: Identity, After Dark, Spotlight, Bento, Editorial, Panel

Border width

0–8px

Default: 1px

Thickness of card and link outlines.

Works on: Identity, After Dark, Bento, Editorial, Panel · partly Spotlight

How these settings affect each other

Surface is SolidCard opacity or Glass blur

The fill is always fully solid and nothing is blurred. Opacity still scales the shadow.

Surface is OutlineCard color, Card opacity or Glass blur

No fill and no blur. The outline uses your Text color, not the Border color.

Surface is FloatingBorder width or Border color

The border is hidden.

Card opacity is 0%Shadow, Glass blur

The card disappears completely: no blur, no shadow, no glows from the card.

Fix: Use 1–5% for a barely-there card that keeps its blur.

Shadowlow Card opacity

Shadows fade with opacity, so a 20% card has a faint shadow.

The Panel layout sets Outline, 0% opacity and no shadow when you pick it. Change them back afterwards if you prefer a filled card.

Related

Colors

The six palette colors and everything each one paints.

Links and icons

Link button style, height, radius, hover effects, and icon-only links.

Compatibility table

Every design setting against all nine layouts: works, partly works, or isn’t used.

Still stuck?Ask in our Discord