Professional-grade background patterns and gradients for modern web applications. A curated collection of CSS patterns that you can copy and integrate into your projects instantly.
Visit: Pattern Craft
- Ready-to-use CSS code - Copy and paste directly into your projects
- Live preview - See patterns in action before implementation
- Modern design - Crafted with contemporary CSS techniques and Tailwind CSS
- Responsive patterns - Optimized for all screen sizes
- Zero dependencies - Pure CSS implementations
- Pattern categories - Organized collection for easy browsing
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Vercel - Deployment and hosting
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/megh-bari/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 the live site: https://pattern-craft.vercel.app/
- Browse through the collection of background patterns and gradients.
- Click on any pattern to open its preview modal.
- Copy the CSS/Tailwind-compatible code snippet.
- Paste it into your project wherever needed — it's responsive, clean, and ready to go!
These snippets work great for:
- Hero sections
- Landing pages
- Cards and sections
- Background art
pattern-craft-demo-1749201866468.mp4
- Browse the pattern collection on the website
- Click on any pattern to see the live preview
- Copy the generated CSS code
- Paste it into your project
Each pattern includes:
- Complete CSS styling
- Tailwind-compatible code
- Responsive implementation
- Cross-browser compatibility
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
src/app/utils/patterns.ts - Add your pattern following the established format:
{
id: "unique-pattern-id",
name: "Pattern Display Name",
badge: "New", // Optional: "New", "Popular"
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:
- Geometric - Grids, dots, lines, shapes
- Gradient - Color transitions and blends
- Texture - Subtle background textures
- Abstract - Creative and artistic patterns
- Minimal - 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/
│ ├── components/
│ │ ├── footer.tsx
│ │ ├── hero.tsx
│ │ ├── navbar.tsx
│ │ ├── pattern-showcase.tsx
│ │ └── theme-provider.tsx
│ ├── types/
│ │ └── pattern.ts
│ ├── utils/
│ │ ├── patterns.ts # Pattern definitions (contribute here)
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ └── ui/ # shadcn/ui components
- 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
For questions, issues, or suggestions:
- Open an issue on GitHub
- Check existing issues before creating new ones
- Provide detailed information for bug reports
- Twitter: @meghtrix
- GitHub: @megh-bari
If you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!