Pattern Craft Collection
Professional-grade background patterns and gradients, crafted with modern CSS and Tailwind. Easily copy and integrate into any project.
Beautiful Gradients
Discover a collection of beautiful gradient patterns ready to copy and paste into your projects. Each pattern is crafted for modern web design.
Gradient Collection
Choose from our curated collection of gradient patterns. Hover to see actions, click to copy or preview.
Top Gradient Radial
Bottom Gradient Radial
Bottom Violet Radial
Bottom Slate Radial
Teal Glow
Pink Glow
Amber Glow
Emerald Glow
Dark Horizon Glow
Crimson Depth
Emerald Void
Violet Abyss
Azure Depths
Orchid Depths
Dark Horizon Glow Top
Crimson Depth Top
Emerald Void Top
Violet Abyss Top
Azure Depths Top
Orchid Depths Top
Purple Gradient Grid Right
Purple Gradient Grid Left
Dual Gradient Overlay
Dual Gradient Overlay Swapped
Dual Gradient Overlay (Top)
Dual Gradient Overlay (Bottom)
Top Fade Grid
Bottom Fade Grid
Diagonal Fade Grid Left
Diagonal Fade Grid Right
Dark Radial Glow
Blue Radial Glow
Purple Radial Glow
Emerald Radial Glow
Dreamy Sky Pink Glow
Warm Beige
Soft Warm Pastel
Warm Light Apricot & Coral
Warm Soft Coral & Cream
Soft Yellow Glow
Soft Dark Yellow Glow
Orange Soft Glow
Soft Green Glow
Purple Glow Right
Teal Glow Right
Warm Orange Glow Right
Cool Blue Glow Right
Purple Glow Left
Teal Glow Left
Warm Orange Glow Left
Cool Blue Glow Left
Purple Glow Top
Teal Glow Top
Warm Orange Glow Top
Cool Blue Glow Top
Paper Texture
Diagonal Stripes
Diagonal Grid - Light
Diagonal Grid - Electric
Zigzag Lightning - Light
Circuit Board - Light
Concentric Squares - Light
Woven Fabric - Light
Crosshatch Art - Light
White Grid with Dots
Noise Texture (Darker Dots)
Circuit Board
Basic Grid
White Sphere Grid
Magenta Orb Grid Light
Dark Sphere Grid
Magenta Orb Grid
Dark Basic Grid
Dark Basic Grid (Faded)
Black Basic Grid
Small Grid
Black Grid with White Dots
Dark Grid with White Dots
Dark Dotted Grid
Dark White Dotted Grid
Dark Noise Colored
Matrix Green
Diagonal Grid - Green Glow
Diagonal Grid - Red/Blue Glow
Diagonal Grid - Electric Orange
Complex Multiplier
Hexagonal Lines
Diagonal Grid - Synthwave
Gradient Left Diagonal Lines
Gradient Right Diagonal Lines
Cross Diagonal Lines
Multi Cross Diagonal Lines
Variable Spacing
Circuit Board Vibes
Zigzag Lightning - Dark
Circuit Board - Dark
Concentric Squares - Dark
Crosshatch Art - Dark
Aurora Midnight Glow
Crimson Shadow Glow
Emerald Depths Glow
Violet Storm Glow
Golden Horizon Glow
Ocean Abyss Glow
Rose Twilight Glow
Copper Forge Glow
Arctic Lights Glow
Indigo Cosmos Glow
Pearl Mist Glow
Magenta Nebula Glow
Morning Haze
Midnight Mist
More Tools
Discover more useful text tools to help you format, convert, and enhance your content quickly and efficiently.
Image Converter
Convert images between JPG, PNG, WebP, AVIF, GIF, and more formats instantly
CSS Switch Collection
Easily create interactive CSS toggle switches with smooth animations and customizable styles for modern UI designs.
Letter Counter
Count letters, words and sentences in a text and analyze this numbers with common limits
Multiple Whitespace Remover
Clean extra spaces and line breaks from text easily
CSS Checkbox Collection
Quickly design custom CSS checkboxes with unique styles, colors, and animations, ready to integrate into your web projects.
Image Cropper
Crop unwanted parts of images and download desired part of the image as a new file
Markdown to HTML Converter
Instantly convert Markdown content into clean, valid HTML
CSS Loader Collection
Easily create animated CSS loaders and spinners with custom colors and styles, ready to use in your projects.
Lorem Ipsum Generator
Create your placeholder texts with desired number of paragraphs and properties
Case Converter
Convert your text into clean, readable sentences with proper capitalization
CSS Box Shadow Generator
Generate beautiful CSS box shadows with adjustable blur, spread, and color options, ready to copy and use in your designs.
Hex to RGBA Converter
Convert hex color codes to RGBA format effortlessly — ideal for transparent designs and fine-tuning UI color schemes.
RGBA to Hex Converter
Easily convert RGBA colors into standard hex codes — perfect for cleaner CSS and design consistency.
Placeholder Image Generator
Create custom placeholder images for design and testing
Frequently Asked Questions
Explore PatternCraft — a collection of gradient SVG backgrounds. Preview and copy the code to enhance your website or app effortlessly.
It’s a free collection of gradient-based SVG background patterns designed for websites and apps. You can preview each pattern and copy the code instantly for your project.
Yes, you can customize them after copying the code into your project. Our site provides the ready-to-use SVG and CSS, but customization (like changing colors, gradients, or scale) is done in your own code editor.
No installation or account is required. The collection works directly in your browser with instant preview.
Absolutely! All SVG patterns are free to use in both personal and commercial projects without attribution.
Yes, the SVG background code works easily with any framework or library, including React, Vue, Angular, Svelte, and others. It will integrate without issues, though in some cases you might need to make minor adjustments (like wrapping styles or tweaking syntax) to match your setup.