Background Patterns & Gradients

Foundry includes 12 background utilities — 6 patterns and 6 gradients — that automatically follow your app's theme colors. They use Nuxt UI's semantic CSS variables (--ui-primary, --ui-border, etc.), so when you change your brand colors in theme.css, every background utility updates automatically.

Background Patterns

Apply to an overlay div with absolute inset-0 positioning:

<div class="relative">
  <div class="absolute inset-0 bg-pattern-grid" />
  <!-- Content -->
</div>

Patterns that use --ui-border-inverted (grid variants, cross) include built-in opacity. Patterns using --ui-primary (dots) use color-mix() for transparency.

Background Gradients

<div class="relative">
  <div class="absolute inset-0 bg-gradient-radial-primary" />
  <!-- Content -->
</div>

For simple linear gradients, use Tailwind's built-in classes: bg-linear-to-r from-primary-500 to-secondary-500.

Layering Patterns + Gradients

The most effective backgrounds layer a gradient underneath a pattern. This is how the Hero component works:

<section class="relative overflow-hidden">
  <!-- Layer 1: Gradient glow -->
  <div class="absolute inset-0 bg-gradient-radial-primary" />
  <!-- Layer 2: Pattern overlay -->
  <div class="absolute inset-0 bg-pattern-grid pointer-events-none" />
  <!-- Layer 3: Content -->
  <div class="relative z-10">
    <!-- Your content -->
  </div>
</section>

Some effective combinations:

Theme Override

These utilities reference semantic CSS variables, so they automatically adapt when you override colors:

@theme {
  /* Change primary hue from blue (250) to green (150) */
  --color-primary-500: oklch(0.55 0.18 150);
}

After this change, bg-gradient-radial-primary, bg-pattern-dots, bg-gradient-spotlight, and bg-gradient-mesh will all use green instead of blue — no other changes needed.

Animation Utilities

Two animation utilities are also available from the layer: