For developers, by a developer. Design that slaps⚡
Effortlessly enhance your websites and apps with 100+ modern CSS background patterns and gradient snippets.
Instantly copy and paste beautifully crafted, production-ready designs built with modern CSS and Tailwind CSS for seamless integration.
Ideal for developers and designers working with React, Next.js, Vue, Angular, or any modern frontend framework. Made for devs who appreciate great design.
This project is proudly sponsored by Vercel. Thank you for supporting open source!
Visit: Pattern Craft
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 Pattern Craft is getting featured, shared, talk about or appreciated?
Check out this growing list of shoutouts, showcases, and love from the community:
⚡Where Pattern Craft is Making Noise??
- 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
- Return back to scroll - Smooth navigation experience
- Add to favorites - Save your preferred patterns
- Customizable snippets - Easily modify patterns to fit your needs
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Vercel - Deployment and hosting
Sponsored by Vercel⚡
This project is proudly powered by Vercel. The platform behind PatternCraft’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/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://patterncraft.store
- 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-vdo.mp4
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
src/data/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/
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ └── not-found.tsx
│
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ └── tabs.tsx
│ ├── layout/
│ │ ├── navbar.tsx
│ │ └── footer.tsx
│ ├── patterns/
│ │ ├── pattern-showcase.tsx
│ │ ├── pattern-card.tsx
│ │ ├── pattern-grid.tsx
│ │ └── pattern-empty-state.tsx
│ ├── home/
│ │ ├── hero.tsx
│ │ ├── support-dropdown.tsx
│ │ └── return-to-preview.tsx
│ └── providers/
│ └── theme-provider.tsx
│
├── lib/
│ ├── utils.ts
│ └── constants.ts
│
├── hooks/
│ ├── useTheme.tsx
│ └── useCopy.tsx
│
├── types/
│ ├── pattern.ts
│ └── index.ts
│
├── context/
│ └── favourites-context.tsx
│
└── data/
├── patterns.ts # Pattern used in UI (contribute here)
└── categories.ts
- 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(X): @meghtrix
- Alternate Twitter(X): @usepatterncraft
- GitHub: @megh-bari
If you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!
This project is proudly supported by:
Happy coding!