Outpost Community Demo

CSS trick: glassmorphism cards with Outpost's theme variables

By pixelpusher ·

Found a neat trick using Outpost's CSS custom properties to create glassmorphism-style topic cards that automatically adapt to light/dark mode. Drop this into your community's custom CSS:

.topic-card {
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 4px 24px var(--shadow-color, rgba(0,0,0,0.08));
}

The color-mix function with the theme variable means it automatically picks up whatever background color the admin has set, with 80% opacity. No need to hardcode colors!

Works great with the accent glow too:

.topic-card:hover {
  box-shadow: 0 8px 32px var(--accent-glow);
}

💡 This adapts to light and dark mode automatically since it references CSS custom properties.

5 replies

mayaonfire ·

This looks incredible! Just applied it to our community and the dark mode version is chef's kiss. The auto-adaptation to the theme is really smart.

danthedev ·

Good call on the Safari compat, Daniel. For a fallback:

.topic-card {
  background: var(--bg-elevated); /* fallback for older browsers */
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

Older browsers just get the solid background which is totally fine.

pixelpusher ·

Good call on the Safari compat, Daniel. For a fallback:

.topic-card {
  background: var(--bg-elevated); /* fallback */
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

Older browsers just get the solid background which is fine.

codewitch ·

Great question — we should document this better. Here are the main ones:

Backgrounds

  • --bg-base --bg-elevated --bg-sunken --bg-hover

Text

  • --text-primary --text-secondary --text-muted

Accent & Brand

  • --accent --accent-subtle --accent-glow

Borders

  • --glass-border --border-default

Status

  • --success --warning --error

I'll add a full reference to the docs. 📝

top-outpost-ninja ·

Great question — we should document this better. Here are the main ones:

  • --bg-base, --bg-elevated, --bg-sunken, --bg-hover
  • --text-primary, --text-secondary, --text-muted
  • --accent, --accent-subtle, --accent-glow
  • --glass-border, --border-default
  • --success, --warning, --error

I'll add a full reference to the docs.