Background Examples Gallery

These examples showcase the versatility of the grid and dot background patterns. Each can be fully customized with different sizes, colors, and effects.

How to use in your layout

For full-page backgrounds, use the BackgroundPattern component in your layout:

// In your layout.tsx
import { BackgroundPattern } from "@/components/backgrounds/base/background-pattern";

export default function Layout({ children }) {
  return (
    <div className="min-h-screen relative bg-background">
      {/* Background Pattern */}
      <BackgroundPattern 
        patternType="grid"  // or "dot"
        gridOrientation="standard"  // or "diagonal" for grid
        gridSize={40}  // for grid
        dotSize={1}  // for dot
        dotSpacing={20}  // for dot
        color="rgba(212, 212, 212, 0.5)"
        darkColor="rgba(100, 100, 100, 0.5)"
        withMask={true}
      />

      {/* Content */}
      <div className="relative z-10">
        {children}
      </div>
    </div>
  );
}

Default Grid

Standard grid with default settings

<BackgroundPattern 
  patternType="grid"
  gridOrientation="standard"
  gridSize={40}
  lineThickness={1.5}
  color="rgba(212, 212, 212, 0.5)"
  darkColor="rgba(100, 100, 100, 0.5)"
  withMask={true}
/>

Fine Grid

Smaller grid size with thinner lines

<BackgroundPattern 
  patternType="grid"
  gridOrientation="standard"
  gridSize={20}
  lineThickness={1}
  color="rgba(212, 212, 212, 0.5)"
  darkColor="rgba(100, 100, 100, 0.5)"
  withMask={true}
/>

Bold Grid

Larger grid with thicker, more prominent lines

<BackgroundPattern 
  patternType="grid"
  gridOrientation="standard"
  gridSize={60}
  lineThickness={3}
  color="rgba(212, 212, 212, 0.7)"
  darkColor="rgba(100, 100, 100, 0.7)"
  withMask={true}
/>

Colored Grid

Blue-tinted grid for a colorful effect

<BackgroundPattern 
  patternType="grid"
  gridOrientation="standard"
  gridSize={40}
  lineThickness={1.5}
  color="rgba(59, 130, 246, 0.3)"
  darkColor="rgba(59, 130, 246, 0.5)"
  withMask={true}
/>

No Mask Grid

Grid without the radial fade effect

<BackgroundPattern 
  patternType="grid"
  gridOrientation="standard"
  gridSize={40}
  lineThickness={1.5}
  color="rgba(212, 212, 212, 0.5)"
  darkColor="rgba(100, 100, 100, 0.5)"
  withMask={false}
/>

Diagonal Grid

A 45-degree rotated grid pattern

<BackgroundPattern 
  patternType="grid"
  gridOrientation="diagonal"
  gridSize={40}
  lineThickness={2}
  color="rgba(212, 212, 212, 0.8)"
  darkColor="rgba(100, 100, 100, 0.8)"
  withMask={true}
/>

Default Dots

Standard dot pattern with default settings

<BackgroundPattern 
  patternType="dot"
  dotSize={1}
  dotSpacing={20}
  color="rgba(212, 212, 212, 0.8)"
  darkColor="rgba(100, 100, 100, 0.8)"
  withMask={true}
/>

Larger Dots

Bigger dots with increased spacing

<BackgroundPattern 
  patternType="dot"
  dotSize={2.5}
  dotSpacing={30}
  color="rgba(212, 212, 212, 0.8)"
  darkColor="rgba(100, 100, 100, 0.8)"
  withMask={true}
/>

Dense Dots

Smaller dots with tighter spacing

<BackgroundPattern 
  patternType="dot"
  dotSize={0.8}
  dotSpacing={10}
  color="rgba(212, 212, 212, 0.7)"
  darkColor="rgba(100, 100, 100, 0.7)"
  withMask={true}
/>

Colored Dots

Red-tinted dots for a colorful effect

<BackgroundPattern 
  patternType="dot"
  dotSize={1.2}
  dotSpacing={20}
  color="rgba(220, 38, 38, 0.5)"
  darkColor="rgba(220, 38, 38, 0.7)"
  withMask={true}
/>

No Mask Dots

Dot pattern without the radial fade effect

<BackgroundPattern 
  patternType="dot"
  dotSize={1}
  dotSpacing={20}
  color="rgba(212, 212, 212, 0.8)"
  darkColor="rgba(100, 100, 100, 0.8)"
  withMask={false}
/>