The Ultimate CSS Background Pattern Library - Craft Beautiful Designs with Code
Transform your websites with 260+ handcrafted CSS background patterns and gradients.
Discover stunning visual effects, geometric designs, retro patterns, and modern textures - all ready to copy-paste into your projects.
Perfect for React, Next.js, Vue, Angular, and any modern web framework. Built by developers, for developers who value beautiful design.
This project is proudly sponsored by Vercel. Thank you for supporting open source!
Visit: DesignForge
Note: This project does not provide plain HTML or vanilla CSS snippets. All code is optimized for JSX (React/Next.js) and Tailwind CSS.
Learn more in this announcement.
Curious where DesignForge is getting featured, shared, talk about or appreciated?
Check out this growing list of shoutouts, showcases, and love from the community:
⚡Where DesignForge is Making Noise??
- 🎨 260+ Unique Patterns - Extensive collection across 13 categories
- 📋 One-Click Copy - Instant code copying with production-ready snippets
- 👁️ Live Preview - Interactive pattern viewer with real-time updates
- 🌓 Dark/Light Themes - Automatic theme switching based on patterns
- 🔍 Smart Search - Find patterns instantly with debounced search
- ⭐ Favorites System - Save and organize your preferred patterns
- 📱 Fully Responsive - Optimized for all screen sizes and devices
- 🎯 Category Filters - Browse by gradients, geometric, retro, effects, and more
- ⚡ Zero Dependencies - Pure CSS implementations, no external libraries
- 🚀 Modern Stack - Built with Next.js 15, TypeScript, and Tailwind CSS
- 💳 UPI Integration - Support the project with easy payments
- 🎨 Glassmorphism UI - Modern, translucent design with backdrop blur
- ⌨️ Keyboard Navigation - Full accessibility with keyboard shortcuts
- Next.js 15 - React framework with App Router and latest features
- TypeScript - Full type safety for robust development
- Tailwind CSS v4 - Latest utility-first CSS framework
- React 19 - Latest React with concurrent features
- Vercel - Global deployment and hosting platform
- Lucide React - Beautiful, consistent icon library
- Sonner - Modern toast notifications
- Next Themes - Seamless theme switching
- QR Code Generation - For UPI payment integration
DesignForge offers 260+ patterns across 13 comprehensive categories:
- Radial gradients, linear gradients, multi-stop gradients
- Sunset gradients, cosmic gradients, retro gradients
- Grid patterns, dot matrices, diagonal lines
- Checkerboards, pixel art, circuit boards
- 80s neon patterns, vintage florals, retro dots
- Synthwave aesthetics, pixel art, checkerboards
- Glow effects, glassmorphism, aurora patterns
- Bubble effects, prism effects, light rays
- Autumn leaves, ocean waves, forest mists
- Sakura blossoms, tropical paradise, coral reefs
- Concrete, marble, wood grain, leather
- Fabric weave, frosted glass, paper texture
- Luxury patterns, elegant geometric shapes
- Sophisticated color combinations
- Modern button styles, card designs
- Subtle elevation effects
- Circuit-inspired designs, digital grids
- Tech-inspired aesthetics
- Colorful light patterns, mystical effects
- Dynamic color transitions
- Moving patterns, gradient animations
- Interactive visual effects
- Fine-grained textures, material simulations
- Realistic surface appearances
Sponsored by Vercel⚡
This project is proudly powered by Vercel. The platform behind DesignForge's blazing-fast deployment and seamless scalability.
Big thanks to Vercel for supporting open source and keeping this project running smoothly!
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/codewithevilxd/pattern-craft.git
cd pattern-craft- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
npm run build
npm start- Visit DesignForge.dev
- Explore 260+ patterns across 13 categories
- Use the search bar to find specific patterns instantly
- Filter by categories or browse the full collection
- Browse & Discover - Scroll through patterns or use category filters
- Live Preview - Click any pattern to see it in action
- Theme Adaptation - Patterns automatically adapt to light/dark themes
- Copy Code - One-click copy of production-ready CSS/Tailwind code
- Save Favorites - Star patterns you love for quick access
- 🎯 Hero Sections - Eye-catching landing page backgrounds
- 💳 Product Cards - Beautiful card designs with depth
- 📱 Mobile Apps - Responsive patterns that work on all devices
- 🖥️ Desktop Apps - Professional UI backgrounds
- 🎨 Design Systems - Consistent visual language
- 📧 Email Templates - HTML-compatible patterns
- 📰 Blog Designs - Engaging article backgrounds
- 🏪 E-commerce - Premium product showcases
You can easily customize any background pattern by modifying the pattern object structure. Each pattern follows this format:
{
id: "unique-pattern-id",
name: "Pattern Display Name",
badge: "New",
style: {
background: "#ffffff",
backgroundImage: `
// Your CSS background patterns here
linear-gradient(to right, #f0f0f0 1px, transparent 1px),
radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
`,
backgroundSize: "96px 64px, 100% 100%",
},
code: `<div className="min-h-screen w-full bg-white relative">
{/* Pattern Name Background */}
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: \`
// Your background image styles
\`,
backgroundSize: "96px 64px, 100% 100%",
}}
/>
{/* Your Content/Components */}
</div>`,
}Colors: Change hex values in backgroundImage gradients
Sizing: Modify backgroundSize values for different scales
Positioning: Adjust gradient positions and directions
Effects: Add multiple background layers for complex patterns
// Original pattern
backgroundImage: `linear-gradient(to right, #f0f0f0 1px, transparent 1px)`;
// Customized version
backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px)`; // Blue lines
backgroundSize: "48px 32px"; // Smaller grid- Browse the pattern collection on the website
- Click on any pattern to see the live preview
- Use the "Add to Favorites" feature to save patterns you like
- Copy the generated CSS code
- Paste it into your project
Each pattern includes:
- Complete CSS styling
- Tailwind-compatible code
- Responsive implementation
- Cross-browser compatibility
This project is sponsored by Vercel, which helps us maintain a stable development environment.
We welcome contributions to expand the pattern collection. To add new patterns:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-pattern-name- Navigate to the appropriate pattern file in
src/data/(e.g.,retro-patterns.ts,geometric-patterns.ts) - Add your pattern following the established format:
{
id: "unique-pattern-id",
name: "Pattern Display Name",
category: "gradients" | "geometric" | "decorative" | "effects",
badge: "New", // Optional: "New"
style: {
background: "#ffffff",
backgroundImage: `
// Your CSS background patterns here
linear-gradient(to right, #f0f0f0 1px, transparent 1px),
radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
`,
backgroundSize: "96px 64px, 100% 100%",
},
code: `<div className="min-h-screen w-full bg-white relative">
{/* Pattern Name Background */}
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: \`
// Your background image styles
\`,
backgroundSize: "96px 64px, 100% 100%",
}}
/>
{/* Your Content/Components */}
</div>`,
}- Consistency: Follow the existing pattern structure exactly
- Naming: Use descriptive, kebab-case IDs and proper display names
- Quality: Ensure patterns are visually appealing and professional
- Performance: Optimize for rendering performance
- Responsiveness: Test patterns across different screen sizes
- Uniqueness: Avoid duplicating existing patterns
Consider these categories when adding patterns:
- Gradient - Color transitions and blends
- Geometric - Grids, dots, lines, shapes
- Decorative - Subtle background textures
- Effects - Clean and simple designs
- Test the pattern in the development environment
- Verify responsive behavior
- Check browser compatibility (Chrome, Firefox, Safari, Edge)
- Ensure code validity and formatting
- Commit your changes with descriptive messages
- Push to your feature branch
- Create a pull request with:
- Clear description of the pattern added
- Screenshots or preview of the pattern
- Any special considerations or notes
git add .
git commit -m "feat: add new geometric grid pattern"
git push origin feature/new-pattern-namepattern-craft/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout with metadata
│ │ ├── page.tsx # Main homepage
│ │ └── not-found.tsx # 404 page
│ │
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components
│ │ │ ├── badge.tsx # Category badges
│ │ │ ├── button.tsx # Custom buttons
│ │ │ ├── tabs.tsx # Category tabs
│ │ │ └── scroll-to-top.tsx # Navigation helper
│ │ ├── layout/ # Layout components
│ │ │ ├── navbar.tsx # Navigation bar
│ │ │ └── footer.tsx # Site footer
│ │ ├── patterns/ # Pattern-related components
│ │ │ ├── pattern-showcase.tsx # Main pattern display
│ │ │ ├── pattern-card.tsx # Individual pattern cards
│ │ │ ├── pattern-grid.tsx # Pattern grid layout
│ │ │ └── pattern-empty-state.tsx # Empty state
│ │ ├── home/ # Homepage sections
│ │ │ ├── hero.tsx # Hero section with stats
│ │ │ ├── support-dropdown.tsx # UPI payment integration
│ │ │ └── return-to-preview.tsx # Preview navigation
│ │ ├── providers/ # Context providers
│ │ │ └── theme-provider.tsx # Theme management
│ │ └── search/ # Search functionality
│ │ └── search-bar.tsx # Debounced search component
│ │
│ ├── lib/ # Utility functions
│ │ ├── utils.ts # Helper functions
│ │ └── constants.ts # App constants & config
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useTheme.tsx # Theme switching logic
│ │ └── useCopy.tsx # Copy to clipboard
│ │
│ ├── types/ # TypeScript definitions
│ │ ├── pattern.ts # Pattern data types
│ │ └── index.ts # Type exports
│ │
│ ├── context/ # React context
│ │ └── favourites-context.tsx # Favorites management
│ │
│ └── data/ # Pattern data files
│ ├── patterns.ts # Main pattern aggregator
│ ├── categories.ts # Category definitions
│ ├── retro-patterns.ts # Vintage patterns
│ ├── dynamic-patterns.ts # Animated patterns
│ ├── textured-patterns.ts # Texture patterns
│ ├── abstract-luxe-patterns.ts # Luxury patterns
│ ├── neomorphic-patterns.ts # Neumorphism patterns
│ ├── cybernetic-patterns.ts # Tech patterns
│ └── aurora-patterns.ts # Aurora patterns
│
├── public/ # Static assets
│ ├── images/ # Screenshots & banners
│ ├── snapshots/ # Pattern screenshots
│ ├── favicon.svg # Site favicon
│ ├── og-banner.png # Social media image
│ ├── robots.txt # SEO configuration
│ └── site.webmanifest # PWA manifest
│
├── .github/ # GitHub configuration
│ └── FUNDING.yml # Sponsorship links
│
├── next.config.ts # Next.js configuration
├── next-sitemap.config.js # SEO sitemap config
├── tailwind.config.ts # Tailwind CSS config
├── tsconfig.json # TypeScript config
├── package.json # Dependencies & scripts
└── README.md # This file
- Use TypeScript for type safety
- Follow ESLint and Prettier configurations
- Maintain consistent code formatting
- Use semantic commit messages
This project is open source and available under the MIT License.
- Built with Next.js and Tailwind CSS
- Inspired by modern web design patterns
- Community-driven pattern collection
Ctrl/Cmd + K- Focus search barEscape- Close modals and dropdownsEnter- Copy pattern code (when focused)Tab- Navigate through patternsSpace- Toggle pattern preview
DesignForge works perfectly on all modern browsers:
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- Use TypeScript for all new code
- Follow ESLint and Prettier configurations
- Use meaningful variable and function names
- Add JSDoc comments for complex functions
- Maintain consistent code formatting
- Test patterns across different screen sizes
- Ensure patterns work in both light and dark themes
- Provide clear, descriptive names
- Include category classification
- Test performance impact
- Fork and create a feature branch
- Make your changes with clear commit messages
- Test thoroughly across different browsers
- Update documentation if needed
- Submit PR with detailed description
For questions, issues, or suggestions:
- 🐛 Bug Reports: GitHub Issues
- 💡 Feature Requests: GitHub Discussions
- 📧 General Questions: Twitter DM
- 💰 Support: UPI -
nishantgaurav721@naviaxis
- Creator: Nishant Gaurav
- Twitter(X): @nishantgaurav
- GitHub: @codewithevilxd
- Portfolio: nishantgaurav.dev
DesignForge is completely free and open source. If you find it helpful, consider:
- ⭐ Star the repository on GitHub
- 🐛 Report bugs or suggest features
- 📢 Share with fellow developers
- 💝 Support via UPI:
nishantgaurav721@naviaxis
Your support helps keep DesignForge growing and improving!
- ⚡ Performance Optimized - Fast loading with modern web standards
- 🎨 Design System Ready - Consistent patterns for professional projects
- 📱 Mobile First - Responsive design that works on all devices
- ♿ Accessible - Keyboard navigation and screen reader support
- 🔧 Developer Experience - Clean code, TypeScript, and great DX
- 🌟 Community Driven - Open source with active development
- 💰 Free Forever - No subscriptions, no hidden costs
- 🚀 Production Ready - Battle-tested code for real applications
- Curated Collection - Every pattern is handcrafted and tested
- Real-World Usage - Patterns designed for actual development scenarios
- Modern Aesthetics - Contemporary design trends and techniques
- Framework Agnostic - Works with any CSS-compatible framework
- SEO Optimized - Fast loading and search engine friendly
- Developer Tools - Copy-paste workflow optimized for speed
Happy coding!
