Background Patterns

Component 8

About

A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any section using pure CSS gradients—no images or external assets required.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Background Patterns to your project and fits it to your theme.

Code

How Background Patterns is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BGPattern } from "@/components/ui/background-patterns";

export function DemoOne() {
	return (
		<div className="mx-auto max-w-4xl space-y-5 p-8">
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="grid" mask="fade-edges" />
				<h2 className="text-3xl font-bold">Grid Background</h2>
				<p className="text-muted-foreground font-mono">With (fade-edges) Mask</p>
			</div>
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="dots" mask="fade-center" />
				<h2 className="text-3xl font-bold">Dots Background</h2>
				<p className="text-muted-foreground font-mono">With (fade-center) Mask</p>
			</div>
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="diagonal-stripes" mask="fade-y" />
				<h2 className="text-3xl font-bold">Diagonal Stripes</h2>
				<p className="text-muted-foreground font-mono">With (fade-y) Mask</p>
			</div>
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="horizontal-lines" mask="fade-right" />
				<h2 className="text-3xl font-bold">Horizontal Lines</h2>
				<p className="text-muted-foreground font-mono">With (fade-right) Mask</p>
			</div>
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="vertical-lines" mask="fade-bottom" />
				<h2 className="text-3xl font-bold">Vertical Lines</h2>
				<p className="text-muted-foreground font-mono">With (fade-bottom) Mask</p>
			</div>
			<div className="relative flex aspect-video flex-col items-center justify-center rounded-2xl border-2">
				<BGPattern variant="checkerboard" mask="fade-top" />
				<h2 className="text-3xl font-bold">Checkerboard Background</h2>
				<p className="text-muted-foreground font-mono">With (fade-top) Mask</p>
			</div>
		</div>
	);
}