Vignette

Preview

Overview

Vignette is a zero-JS, CSS-only radial gradient layer that adds cinematic depth to dark-background canvases. It is ported from the Blacklight .bl-vignette depth system (BL-326) and is visually identical at defaults: a 120% × 90% radial gradient centered at 50% 38%, fading from transparent at 52% to rgba(0, 0, 6, 0.5) at 100%.

The component is decorative-only:

• position: fixed — escapes the containing block and covers the full viewport
• pointer-events: none — never captures mouse/touch events
• aria-hidden="true" — invisible to assistive technology

Usage

Drop <Vignette /> anywhere in your layout tree. Because it is position: fixed it sits over the full viewport regardless of where in the DOM it is placed.

import { Vignette } from '@/components/visual/vignette/vignette';

export default function Page() {
  return (
    <>
      <Vignette />
      <main>…</main>
    </>
  );
}

Customising Strength and Position

All gradient parameters are CSS custom properties. Override them via the style prop:

<Vignette
  style={{
    // Widen the clear center — less vignette
    '--vignette-transparent-stop': '65%',
    // Use a warmer dark color
    '--vignette-color': 'rgba(6, 0, 0, 0.6)',
    // Pull focal point higher
    '--vignette-position': '50% 25%',
  } as React.CSSProperties}
/>

z-Index

The default zIndex is 20, matching the original Blacklight value. Adjust it via the zIndex prop if your layout uses a different stacking context:

<Vignette zIndex={10} />

Installation

npx visor add vignette

Props

No props data available for “”.