Texture Overlay

A component that provides various texture overlay patterns using CSS gradients for adding visual texture to backgrounds and surfaces.

Texture Overlay Showcase

Explore different texture patterns using CSS gradients for adding visual texture to backgrounds and surfaces.

Dots Pattern

dots texture

Grid Pattern

grid texture

Noise Pattern

noise texture

Crosshatch Pattern

crosshatch texture

Diagonal Pattern

diagonal texture

Scattered Dots

scatteredDots texture

Halftone Pattern

halftone texture

Triangular Pattern

triangular texture

Chevron Pattern

chevron texture

Paper Grain

paperGrain texture

Horizontal Lines

horizontalLines texture

Vertical Lines

verticalLines texture

Opacity Variations

See how different opacity values affect the texture appearance

Dots Pattern

Opacity: 0.3

Dots Pattern

Opacity: 0.6

Dots Pattern

Opacity: 1

Custom Styling

Combine with custom classes for unique effects

Grid with Blend Mode

mix-blend-overlay

Noise with Custom Opacity

opacity-50 class

"use client"

import { TextureOverlay } from "@/components/ui/texture-overlay"

export function TextureOverlayDemo() {
  return (
    <div className="dark:bg-stone-950 py-6 px-4 md:px-0 rounded-md flex justify-center">
      <div className="max-w-6xl w-full">
        <div className="text-center space-y-4 mb-12">
          <h2 className="text-3xl font-bold tracking-tight text-foreground">
            Texture Overlay Showcase
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Explore different texture patterns using CSS gradients for adding
            visual texture to backgrounds and surfaces.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            { type: "dots" as const, name: "Dots Pattern" },
            { type: "grid" as const, name: "Grid Pattern" },
            { type: "noise" as const, name: "Noise Pattern" },
            { type: "crosshatch" as const, name: "Crosshatch Pattern" },
            { type: "diagonal" as const, name: "Diagonal Pattern" },
            { type: "scatteredDots" as const, name: "Scattered Dots" },
            { type: "halftone" as const, name: "Halftone Pattern" },
            { type: "triangular" as const, name: "Triangular Pattern" },
            { type: "chevron" as const, name: "Chevron Pattern" },
            { type: "paperGrain" as const, name: "Paper Grain" },
            { type: "horizontalLines" as const, name: "Horizontal Lines" },
            { type: "verticalLines" as const, name: "Vertical Lines" },
          ].map((texture) => (
            <div
              key={texture.type}
              className="relative h-48 rounded-lg bg-card border overflow-hidden shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]"
            >
              <TextureOverlay texture={texture.type} />
              <div className="relative z-10 p-6 h-full flex items-end">
                <div className="bg-background/80 backdrop-blur-sm rounded-md px-3 py-2 border">
                  <h3 className="font-medium text-foreground">
                    {texture.name}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {texture.type} texture
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 space-y-8">
          <div className="text-center">
            <h3 className="text-2xl font-bold tracking-tight text-foreground mb-4">
              Opacity Variations
            </h3>
            <p className="text-muted-foreground mb-8">
              See how different opacity values affect the texture appearance
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[0.3, 0.6, 1.0].map((opacity) => (
              <div
                key={opacity}
                className="relative h-32 rounded-lg bg-card border overflow-hidden shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]"
              >
                <TextureOverlay texture="dots" opacity={opacity} />
                <div className="relative z-10 p-4 h-full flex items-end">
                  <div className="bg-background/80 backdrop-blur-sm rounded-md px-3 py-2 border">
                    <h4 className="font-medium text-foreground">
                      Dots Pattern
                    </h4>
                    <p className="text-sm text-muted-foreground">
                      Opacity: {opacity}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center">
            <h3 className="text-2xl font-bold tracking-tight text-foreground mb-4">
              Custom Styling
            </h3>
            <p className="text-muted-foreground mb-8">
              Combine with custom classes for unique effects
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="relative h-32 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 overflow-hidden">
              <TextureOverlay texture="grid" className="mix-blend-overlay" />
              <div className="relative z-10 p-4 h-full flex items-center justify-center">
                <div className="bg-background/80 backdrop-blur-sm rounded-md px-3 py-2 border">
                  <h4 className="font-medium text-foreground">
                    Grid with Blend Mode
                  </h4>
                  <p className="text-sm text-muted-foreground">
                    mix-blend-overlay
                  </p>
                </div>
              </div>
            </div>

            <div className="relative h-32 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 overflow-hidden">
              <TextureOverlay texture="noise" className="opacity-50" />
              <div className="relative z-10 p-4 h-full flex items-center justify-center">
                <div className="bg-background/80 backdrop-blur-sm rounded-md px-3 py-2 border">
                  <h4 className="font-medium text-foreground">
                    Noise with Custom Opacity
                  </h4>
                  <p className="text-sm text-muted-foreground">
                    opacity-50 class
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/texture-overlay.json

Usage

import { TextureOverlay } from "@/components/ui/texture-overlay"

Basic Usage

<TextureOverlay texture="dots" />
<TextureOverlay texture="grid" opacity={0.5} />
<TextureOverlay texture="none" />

With Custom Styling

<div className="relative bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-8">
  <TextureOverlay texture="grid" className="mix-blend-overlay" />
  <div className="relative z-10">
    <h2>Content with texture overlay</h2>
  </div>
</div>

API Reference

Props

Prop	Type	Default	Description
`texture`	`TextureType`	-	The type of texture pattern to display
`opacity`	`number`	`defaultOpacities[texture]`	The opacity of the texture overlay (0-1)
`className`	`string`	-	Additional CSS classes to apply

TextureType

The TextureType union includes the following options:

"dots" - Small circular dots pattern
"grid" - Grid lines pattern
"noise" - Random noise pattern
"crosshatch" - Crosshatch pattern
"diagonal" - Diagonal lines pattern
"radialDots" - Radial dots from center
"scatteredDots" - Scattered dots pattern
"halftone" - Halftone dots pattern
"triangular" - Triangular pattern
"chevron" - Chevron pattern
"paperGrain" - Paper grain texture
"horizontalLines" - Horizontal lines
"verticalLines" - Vertical lines
"none" - No texture (component returns null)

Examples

Card with Texture Background

<div className="relative bg-card rounded-lg p-6 shadow-lg">
  <TextureOverlay texture="paperGrain" opacity={0.3} />
  <div className="relative z-10">
    <h3 className="text-lg font-semibold">Card Title</h3>
    <p className="text-muted-foreground">Card content with subtle texture</p>
  </div>
</div>

Hero Section with Texture

<section className="relative min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
  <TextureOverlay texture="noise" opacity={0.4} />
  <div className="relative z-10 flex items-center justify-center">
    <div className="text-center">
      <h1 className="text-4xl font-bold text-white">Hero Title</h1>
      <p className="text-slate-300">Hero subtitle with texture background</p>
    </div>
  </div>
</section>

Multiple Texture Layers

<div className="relative bg-background rounded-lg p-8">
  <TextureOverlay texture="grid" opacity={0.2} />
  <TextureOverlay texture="dots" opacity={0.1} className="mix-blend-multiply" />
  <div className="relative z-10">
    <h2>Layered Textures</h2>
    <p>Combining multiple texture patterns</p>
  </div>
</div>

Styling

The component uses CSS gradients to create texture patterns. You can customize the appearance by:

Adjusting the opacity prop for transparency
Adding custom className for additional styling
Using CSS blend modes like mix-blend-overlay or mix-blend-multiply
Combining multiple TextureOverlay components for layered effects

Performance

The component is optimized for performance by:

Using CSS gradients instead of images
Minimal DOM footprint (single div element)
No JavaScript animations or calculations
Lightweight and fast rendering

Accessibility

The component is designed to be accessible:

Uses pointer-events-none to ensure it doesn't interfere with user interactions
Positioned absolutely to not affect document flow
Can be safely used as decorative elements

TextureCard 3D Carousel

Texture Overlay

Texture Overlay Showcase

Dots Pattern

Grid Pattern

Noise Pattern

Crosshatch Pattern

Diagonal Pattern

Scattered Dots

Halftone Pattern

Triangular Pattern

Chevron Pattern

Paper Grain

Horizontal Lines

Vertical Lines

Opacity Variations

Dots Pattern

Dots Pattern

Dots Pattern

Custom Styling

Grid with Blend Mode

Noise with Custom Opacity

Installation

Usage

Basic Usage

With Custom Styling

API Reference

Props

TextureType

Examples

Card with Texture Background

Hero Section with Texture

Multiple Texture Layers

Styling

Performance

Accessibility

On this page