Silk Background for React

Silk fills the box with slow, broad fields of colour and a satin sheen gliding across them. Soft fields of violet, sky and teal on an indigo ground turn once a minute, a warm rose and a violet blob drift over them, and two sets of curved highlight bands glide past each other on top in soft light, like light on folded fabric. Every field eases out to transparent, so nothing ever shows an edge or a line, at any angle or size. It's all CSS gradients moved by transforms, which the browser composites without repainting: no blur, no canvas and no script. It's paler on a light page and deeper on a dark one.

Use it behind a launch hero, a pricing header or a sign-up card. For soft blobs without the sheen, use Mesh Gradient; for sheets of light instead of fabric, Aurora; for flowing bands as distinct strips, Ribbons. Gradient Animation orbits soft colour without folds, Light Waves gives ambient colour washes, and Marble has the same slow drift, in stone.

Installation

Usage

import { Silk } from "@/components/ui/silk";

<Silk className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Launch week</h1>
</Silk>

Silk is a container: your content goes inside it, and the fabric sits behind that content. Give it a size with className; for a whole page, className="fixed inset-0 -z-10" with no children. The fabric is laid over your theme's background by intensity, so it's a pastel satin in light mode and a deep one in dark mode.

Demos

Warm Silk

colors takes up to five CSS colours: the first four make the turning ground and the violet blob, the fifth the warm blob. With fewer, the last one repeats. Here amber, red and magenta.

Behind a Card

intensity="subtle" lays the fabric over your background at about a third of its strength, a pale field in light mode and a soft tint in dark mode, so text in your foreground colour reads at body size. speed={0.5} halves the motion.

Accessibility

The fabric is decoration: it's hidden from assistive tech and never takes the pointer, so everything you put inside works as usual. With reduced motion everything holds still and you keep the full fabric and sheen as a still image; in forced-colors mode it's hidden. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). At the default medium it stays above 5:1 in light mode and about 4:1 or more in dark mode at the worst moment, enough for headings and short lines; for long body text, use intensity="subtle". strong shows the full colour, so put copy on a plate there, and check again with your own colors.

FAQ

API Reference