Marble Background for React

Q: How do I change the stone?

Set baseColor (the ground), stoneColor (the soft clouding) and veinColor (the veins and, fainter, the hairline cracks). Make the vein stand out from the ground. By default they're mixed from your theme's background and foreground, so the stone follows light and dark mode.

Q: What do warp and scale do?

warp bends the veins: 0 gives straight stripes, 1 marble, 2 or more marbled paper. scale gives more, finer veins (above 1) or wider slabs (below 1).

Q: Two marble sections look identical. How do I vary them?

Give each its own seed. Every number cuts a different piece of the same stone, and the same seed always gives the same slab, on the server too.

Q: Can I change or turn off the sheen?

sheen={false} leaves the stone matte. Set --marble-glint to any colour, such as color-mix(in oklab, white 8%, transparent) for a faint gleam on dark stone; by default it's a white glare on light stone and a soft gleam on dark.

Polished stone behind your content: soft clouding, bold wandering veins, a web of hairline cracks and a slow sheen, white Carrara in light mode and black Marquina in dark mode. For React with Base UI, when a luxury, editorial or portfolio page should feel like stone.

Marble puts a slab of polished stone behind your content: soft grey clouding, bold veins that wander and crinkle across it, a web of fine hairline cracks between them, and a soft band of light that glides across the polished surface and back. It's white Carrara in light mode and black Marquina in dark mode. The slab is one SVG filter the browser draws once (noise bends a band pattern into veins, a second, creased noise gives the cracks, and tables pick out each), coloured from CSS variables. The whole slab then drifts and turns very slowly and the sheen slides over it, both with CSS transforms, so the filter never runs again while it moves and no script runs. Three colours make any stone, from Calacatta gold to Verde Alpi.

Use it for luxury product heroes, editorial covers and pricing cards. For flowing colour instead of stone, use Silk; for another material surface, Paper; for soft pigment washes, Watercolor. Ink swirls keep moving, Topography draws the same kind of swirl as contour lines, and Mesh Gradient gives soft colour without veins.

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 { Marble } from "@/components/ui/marble";

<Marble className="min-h-[480px]">
  <h1>Atelier</h1>
</Marble>

Marble is a container: your content goes inside it, and the slab sits behind that content. Give it a size with className; for a whole page, className="fixed inset-0 -z-10" with no children. Set the stone with baseColor, stoneColor and veinColor rather than a background class: the slab covers the container's own background.

Demos

Calacatta Gold

A cream ground (baseColor), warm taupe clouding (stoneColor) and gold veins (veinColor); the hairline cracks take the vein colour, fainter. The colours reach the filter as CSS, so any CSS colour works, and they stay the same in light and dark mode once you set them.

PreviewCode

Verde Alpi

Dark green stone with pale veins, in a card. warp={1.6} makes the veins wander harder, seed={3} cuts a different piece of the slab, and --marble-glint turns the sheen down to a faint gleam, as dark stone wants.

PreviewCode

Accessibility

The slab is decoration: it's hidden from assistive tech and never takes the pointer, so everything you put inside works as usual. With reduced motion the slab and the sheen hold still, a full polished marble surface, and in forced-colors mode it's hidden. Nothing flashes: the sheen takes 18 seconds to cross and only lightens the stone a little. The clouding is a light mix of your foreground colour, so text in that colour reads well; a bold vein that passes behind small text can lower its contrast, so try another seed or put a plate such as bg-background/70 behind it.

FAQ

How do I change the stone?

Set baseColor (the ground), stoneColor (the soft clouding) and veinColor (the veins and, fainter, the hairline cracks). Make the vein stand out from the ground. By default they're mixed from your theme's background and foreground, so the stone follows light and dark mode.

Why does it look like stone and not smoke?

Real marble has crisp veins at two scales. The bold veins are the sharp crests of a band pattern bent by five octaves of noise, so they wander and crinkle; the hairlines are the deep creases of a second, turbulent noise. Both fade in and out along their length, as veins do, over soft clouding.

What do warp and scale do?

warp bends the veins: 0 gives straight stripes, 1 marble, 2 or more marbled paper. scale gives more, finer veins (above 1) or wider slabs (below 1).

Two marble sections look identical. How do I vary them?

Give each its own seed. Every number cuts a different piece of the same stone, and the same seed always gives the same slab, on the server too.

Can I change or turn off the sheen?

sheen={false} leaves the stone matte. Set --marble-glint to any colour, such as color-mix(in oklab, white 8%, transparent) for a faint gleam on dark stone; by default it's a white glare on light stone and a soft gleam on dark.

Is it expensive?

The filter runs once when the browser first draws the slab, off the main thread, and again only when its size changes. While it moves, the browser only turns and shifts the finished image and slides the sheen, on the compositor, the part of the browser that moves layers without repainting them.

How does it move?

The slab drifts a couple of dozen pixels and turns 4 degrees, back and forth, over 40 seconds, and the sheen crosses it and comes back every 36. speed changes both; the veins themselves don't change shape. With reduced motion everything stays still.