Dot Background

The DotBackground component creates a subtle dot-grid pattern for backgrounds. It’s ideal for adding visual texture to pages while maintaining a clean, minimal aesthetic.

Usage

<script>
  import DotBackground from "$lib/components/ui/DotBackground.svelte";
</script>

<DotBackground />

Examples

API Reference

Prop	Type	Default	Description
class	string	''	Additional CSS classes to apply to the component

Implementation

The DotBackground component creates a dot grid pattern using CSS background properties and a radial gradient mask:

<script lang="ts">
	import { cn } from '$lib/utils';

	let { class: className = '' } = $props<{ class?: string }>();
</script>

<div class={cn('fixed inset-0 -z-10', className)}>
	<div
		class="absolute h-[200%] w-[200%] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"
	>
		<div
			class="absolute inset-0 bg-[radial-gradient(hsl(var(--ui-300))_1px,transparent_1px)]"
			style:background-size="20px 20px"
		/>
	</div>
</div>

In the implementation:

• The component uses a fixed position by default, covering the entire viewport
• A negative z-index (-z-10) places it behind other content
• A radial gradient creates the dot pattern
• A mask image creates a fading effect toward the center
• The component accepts a custom class to override styling as needed

Customizing

When using this component within contained elements rather than full-page, you should override the fixed positioning:

<div class="relative h-64">
  <DotBackground class="!fixed !inset-auto absolute inset-0" />
  <div class="relative z-10">Your content here</div>
</div>

This ensures the background is positioned relative to its container rather than the viewport.