--- /** * NoiseGridBackground — full-size section background compositing two static * layers: a repeating column pattern (each column shaded by a soft * left-to-right gradient and separated by a thin vertical divider line, * built with one repeating CSS gradient so it tiles at any width) and a * procedural film-grain noise texture masked to fade out toward the edges. * Content renders on top through the default slot. * * Zero client JavaScript, pure CSS. Colors follow the color scheme: the * dark values apply under `html.dark`, `[data-theme='dark']`, or the OS * preference when no explicit light theme is set. */ interface Props { /** Width of each repeating vertical column, in pixels. */ stripWidth?: number; /** Column gradient color at the left edge, in light color scheme. */ color?: string; /** Column gradient color near the right edge, in light color scheme. */ colorEnd?: string; /** Column gradient color at the left edge, in dark color scheme. */ darkColor?: string; /** Column gradient color near the right edge, in dark color scheme. */ darkColorEnd?: string; /** Vertical divider line color, in light color scheme. */ lineColor?: string; /** Vertical divider line color, in dark color scheme. */ lineColorDark?: string; /** Opacity of the grain noise overlay (0–1). */ noiseIntensity?: number; /** Additional classes for the root element. */ class?: string; } const { stripWidth = 80, color = '#f5f5f5', colorEnd = '#ffffff', darkColor = '#171717', darkColorEnd = '#0a0a0a', lineColor = '#a3a3a3', lineColorDark = '#262626', noiseIntensity = 0.05, class: className, } = Astro.props; /** Inline SVG turbulence noise — a procedural grain texture, no image asset. */ const NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; const rootVars = [ `--ngb-strip: ${stripWidth}px`, `--ngb-color-start-light: ${color}`, `--ngb-color-end-light: ${colorEnd}`, `--ngb-color-start-dark: ${darkColor}`, `--ngb-color-end-dark: ${darkColorEnd}`, `--ngb-line-light: ${lineColor}`, `--ngb-line-dark: ${lineColorDark}`, `--ngb-noise-opacity: ${noiseIntensity}`, ].join('; '); ---

Installation

Install dependencies

Add these files

Configuration

Use it