Watercolor Background for React

Q: Can I use my brand colours?

Yes. Pass up to four colours to colors, or theme variables such as var(--chart-1); fewer are repeated. You can also set --watercolor-color-1 to --watercolor-color-4 in your CSS. Muted colours look most like paint.

Q: Is it heavy?

No. The washes and the paper are drawn once, and only transform animates, over 35 to 56 seconds per loop, so the browser composites it without repainting and no script runs.

Q: Can I turn off the paper texture?

Yes: paper={false} removes the cold-press tooth, for a cleaner wash or a page that already has its own texture. The paper's warm tint stays.

A soft watercolour wash around the edges of the box: muted pigments with crisp, pooled rims on cold-press paper, glazing slowly over each other. For React with Base UI, when a creative, editorial or friendly page needs a calm, hand-made wash behind its copy.

A few large washes of watercolour frame the box: ultramarine, rose madder, sap green and yellow ochre, muted, each with a crisp, darker rim where the pigment pooled as it dried, thinner and denser patches inside, on cold-press paper whose tooth shows through the pigment. A faint glaze crosses the middle, so it's calm but never bare. Where two washes overlap they glaze like real paint, and they drift, turn and swell very slowly, so the glazes keep shifting. Each wash is its pigment through a mask the browser draws once from an SVG filter (noise pushes an ellipse into lobes, the edge is cut crisp and darkened, noise varies the pigment); CSS keyframes move them with transforms only, so nothing repaints and no script runs. On a dark page the paper turns dark and the pigments glow softly instead of staining.

Use it for a portfolio, a course or workshop page, or a friendly product's hero. For ink blooming in water, darker and always moving, use Ink; for a clean digital blur with no paper, Mesh Gradient; for the paper alone, Paper; for veined stone, Marble.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Watercolor } from "@/components/ui/watercolor";

The washes sit around the container's edges and corners, behind whatever you put inside, on their own sheet of paper. Give the container a height; for the whole page, render it empty with className="fixed inset-0 -z-10".

<Watercolor className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Wet on wet</h1>
</Watercolor>

Demos

On-theme wash

colors takes up to four CSS colours, repeated when there are fewer; theme variables work too. Here the theme's chart colours, var(--chart-1) to var(--chart-4).

PreviewCode

Behind a form

intensity="subtle" thins the pigment and speed={0.5} slows the drift, quiet enough to sit behind a card of body copy.

PreviewCode

Accessibility

The paint is decorative: it's hidden from assistive tech and never takes the pointer, and your content stays on top in normal flow. With reduced motion the washes stop where they are; they move so slowly that the still picture looks the same. Nothing flashes.

Keep copy in the calm middle, in your foreground colour (text-foreground): the glaze there is faint, and even the denser washes at the edges are light, mid-tone pigment on a light page and a soft glow on a dark one. Behind body text, use intensity="subtle" or put the text on a card.

FAQ

Why do the overlaps look like real paint?

The washes multiply over each other, as layers of transparent paint do, so blue over yellow turns green instead of washing out to a lighter blend. On a dark page they're screened instead, so they glow.

How are the edges and rims made?

Each wash's shape is an SVG image: an ellipse whose depth falls toward its rim, pushed into lobes by noise (fine octaves fray the edge), then cut by a table to a crisp edge with a darker line just inside it, where the pigment pooled as it dried. The same noise thins and gathers the pigment inside. The browser draws each image once, and with one noise and no wide blur it stays quick even where filters run on the processor.

Can I use my brand colours?

Yes. Pass up to four colours to colors, or theme variables such as var(--chart-1); fewer are repeated. You can also set --watercolor-color-1 to --watercolor-color-4 in your CSS. Muted colours look most like paint.

Does it work in dark mode?

Yes. On a dark page the paper is dark, the pigments are lighter and thinner, and they're screened instead of multiplied, so they glow softly rather than staining.

Is it heavy?

No. The washes and the paper are drawn once, and only transform animates, over 35 to 56 seconds per loop, so the browser composites it without repainting and no script runs.

Can I turn off the paper texture?

Yes: paper={false} removes the cold-press tooth, for a cleaner wash or a page that already has its own texture. The paper's warm tint stays.

API Reference

Watercolor

<div> data-slot="watercolor"

PropType

colors?string[]

Up to four CSS colours for the pigments, repeated when there are fewer. By default ultramarine, rose madder, sap green and yellow ochre, muted; brighter on a dark page.

intensity?"subtle" | "medium" | "strong"

How dense the pigment is: subtle behind body text, strong for a poster.