Noise Texture
Noise Texture paints grain with one feTurbulence node. The filter generates fractal noise, desaturates it with a saturate(0) matrix, then scales every channel with the same linear transfer, which sets the contrast without tinting the result. The output fills one rect, so the whole overlay is a single paint with no image to download.
Because the grain comes from a filter rather than a texture image, it stays sharp at any size and its character is fully described by four numbers. The element sits at absolute inset-0 behind the content, and fades to opacity-75 in dark mode where grain would otherwise disappear.
Usage
Noise Texture
Fine grain, painted once by a turbulence filter
<template>
<div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-elevated">
<MNoiseTexture class="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]" />
<div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-bold text-highlighted">
Noise Texture
</h3>
<p class="max-w-xs text-sm text-muted">
Fine grain, painted once by a turbulence filter
</p>
</div>
</div>
</template>
Examples
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
frequency | number | 0.4 | baseFrequency for the turbulence. Higher values give finer grain; lower values give soft, cloudy blotches. |
octaves | number | 6 | numOctaves for the turbulence. More octaves add detail at smaller scales and cost more to render. |
slope | number | 0.15 | Linear slope applied to each channel after desaturation, which is what sets the contrast. |
noiseOpacity | number | 0.6 | Opacity of the filled noise layer. |
class | string | '' | CSS classes for the <svg>. The element is positioned to fill its parent, so give the parent a height. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.noiseTexture in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | pointer-events-none absolute inset-0 z-0 size-full select-none opacity-50 dark:opacity-75 |
Accessibility
The <svg> is aria-hidden and pointer-events-none, so the grain is never announced and never blocks a pointer. It is pure texture — a masked overlay is the usual way to keep it away from text you still need to read.