Nebula Background for React

Large clouds of coloured gas drift and swell slowly along one band that rises across the box, overlapping and shifting hue as they thin, adding up into brighter colours in dark mode. Fine bright filaments lace the band and darker lanes of dust cut across it, and stars in three sizes shine through, a few with a soft cross of light. Each cloud is a soft radial gradient placed when the page renders, moved and scaled by CSS keyframes; the filaments and the dust are noise textures drawn once and never moved. There's no canvas and no blur filter, and every render has the same composition. On a light page the clouds turn pastel behind ink stars.

Use it for a calm space backdrop. For the same softness without stars, use Mesh Gradient; for the Milky Way as a band of stars across the sky, Galaxy; for curtains of light instead of round clouds, Aurora.

Installation

Usage

import { Nebula } from "@/components/ui/nebula";

<Nebula className="flex min-h-[440px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Into the void</h1>
</Nebula>

Nebula is a container: whatever you put inside sits on top of the clouds, in normal flow. The clouds follow a band from the bottom left corner to the top right one, sized from the container's shorter side, so give it a height or content. For the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

In a card

count={4} thins the clouds and intensity="subtle" pales them, quiet enough for body text on a card.

Deep field

colors takes up to four colours, taken in turn by the clouds: here teal, indigo and violet. The container's dark class and bg-background keep this scene dark in both colour schemes.

Accessibility

The nebula is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion the clouds stop drifting and the stars stop twinkling, holding the same composition, filaments and dust included. Nothing flashes. Text in your foreground colour reads over it in both colour schemes: on a light page the clouds are pastel, and in dark mode even the brightest overlaps stay at mid luminance, below white text.

FAQ

API Reference