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.

Pattern Craft in the Wild!!!

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??

Features

• 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

Tech Stack

• 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!

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

git clone https://github.com/megh-bari/pattern-craft.git
cd pattern-craft

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

How to Use This

1. Visit the live site: https://patterncraft.fun
2. Browse through the collection of background patterns and gradients.
3. Click on any pattern to open its preview modal.
4. Copy the CSS/Tailwind-compatible code snippet.
5. 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

Demo

pattern-craft-demo-vdo.mp4

Customization

Manual Pattern Customization

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>`,
}

Customization Tips

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

Example Customization

// 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

Usage

1. Browse the pattern collection on the website
2. Click on any pattern to see the live preview
3. Use the "Add to Favorites" feature to save patterns you like
4. Copy the generated CSS code
5. Paste it into your project

Each pattern includes:

• Complete CSS styling
• Tailwind-compatible code
• Responsive implementation
• Cross-browser compatibility

Contributing

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:

Adding New Patterns

1. Fork the repository
2. Create a feature branch:

git checkout -b feature/new-pattern-name

3. Navigate to src/data/patterns.ts
4. 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>`,
}

Contribution Guidelines

• 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

Pattern Categories

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

Testing Your Patterns

1. Test the pattern in the development environment
2. Verify responsive behavior
3. Check browser compatibility (Chrome, Firefox, Safari, Edge)
4. Ensure code validity and formatting

Pull Request Process

1. Commit your changes with descriptive messages
2. Push to your feature branch
3. 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-name

Development

Project Structure

pattern-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      

Code Standards

• Use TypeScript for type safety
• Follow ESLint and Prettier configurations
• Maintain consistent code formatting
• Use semantic commit messages

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with Next.js and Tailwind CSS
• Inspired by modern web design patterns
• Community-driven pattern collection

Support

For questions, issues, or suggestions:

• Open an issue on GitHub
• Check existing issues before creating new ones
• Provide detailed information for bug reports

Built By

• 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!

Star History

---

Happy coding!