Skip to content
IntelliHelper logo

Intelli UI

Glass SystemLiquid Glass

Background Picture

Preset gradients, custom uploads, or reset to default mesh backgrounds. Preview live, copy the source, or install with the CLI into your Next.js project.
More glass system
npx @intellihelper/cli@latest add background-picture-picker

Background picker

Preset gradients, custom upload, or reset to default mesh.

About this component

Background Picture is part of Glass System. Preset gradients, custom uploads, or reset to default mesh backgrounds.

Install with npx @intellihelper/cli@latest add background-picture-picker. Files land in your project so you can customize styles, variants, and behavior without a locked package.

Prefer AI-assisted install? Use the agent plugin or the MCP server.

When to use Background Picture

Use when

  • Use Background Picture when preset gradients, custom uploads, or reset to default mesh backgrounds.
  • You need frosted chrome (bars, icon buttons, content cards) that sit above expressive product surfaces.
  • You want Liquid Glass hierarchy instead of applying blur to every panel.

Avoid when

  • You only need a single neutral Button with no glass system — start with actions instead.
  • You are shipping a purely text document without chrome chrome layers.

Accessibility notes

  • Keep interactive chrome contrast above WCAG AA against the active mesh or image background.
  • Do not rely on blur alone to communicate state; pair with borders, weight, and focus rings.
  • Icon-only glass controls need accessible names (aria-label or visible text).

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Place chrome components (glass-bar, glass-icon-button) above content panels — not nested inside saturated content cards.
  • Pair with theme tokens from Intelli UI so blur, border, and fill stay consistent across pages.

FAQ

Related components

View all glass system →