StackBits - React UI & Full-Stack Code Library

Backgrounds > Texture Background

🎨 Texture Background

Say goodbye to boring, flat backgrounds! TextureBackground is a lightweight React component that adds a crisp, customizable texture overlay to your UI, instantly enhancing its depth and aesthetic appeal. 🌟 With adjustable pattern sizes and seamless integration, this effect is perfect for minimalist designs, sleek modern UIs, or retro-inspired web pages. Built for performance and visual impact, it brings subtle sophistication without slowing things down. Whether you're designing a futuristic dashboard, a bold landing page, or a nostalgic 8-bit interface, TextureBackground ensures your backgrounds are anything but ordinary. 🚀✨

Preview

Texture Background

Follow below steps 👇🏻

Component

Create a file texture-background.tsx in your components folder and paste this code

1import React, { CSSProperties } from 'react';
2        
3type TextureBackgroundProps = {
4    children: React.ReactNode;
5    className?: string;
6    style?: CSSProperties;
7    size?: number;
8};
9
10const TextureBackground = ({ children, className, style, size = 4 }: TextureBackgroundProps) => {
11    return (
12    <div className={`overflow-hidden relative h-full w-full`}>
13        <div
14        style={{
15            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")`
16        }}
17        className="h-[100%] w-[100%] absolute z-0 top-0 left-0"
18        />
19        <div style={style} className={`${className} z-10`}>
20        {children}
21        </div>
22    </div>
23    );
24};
25
26export default TextureBackground;

Usage

1<TextureBackground
2    size={6}
3    className="bg-sky-500 text-5xl font-extrabold text-black  rounded-xl flex items-center justify-center h-full w-full"
4>
5    Texture Background
6</TextureBackground>

⭐️ Got a question or feedback?
Feel free to reach out!