- Visit the live site: https://pixelflowdesigns.netlify.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 flow!
These snippets work great for:
- Hero sections
- Landing pages
- Cards and sections
- Background art
- UI animations
For developers, by a developer. Design that flows⚡
Effortlessly enhance your websites and apps with 150+ 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 flowing design.
Visit: PixelFlow
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 PixelFlow is getting featured, shared, talked about or appreciated?
Check out this growing list of shoutouts, showcases, and love from the community:
⚡Where PixelFlow is Making Waves??
- 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
- Flowing animations - Smooth transitions and micro-interactions
- Next.js 15 - 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/shivas1432/PixelFlow.git
cd PixelFlow- 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 startYou 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
Flow: Create smooth transitions between pattern states
// Original pattern
backgroundImage: `linear-gradient(to right, #f0f0f0 1px, transparent 1px)`;
// Customized flowing version
backgroundImage: `linear-gradient(45deg, #3b82f6 1px, transparent 1px)`; // Diagonal blue lines
backgroundSize: "48px 32px"; // Smaller grid with flow- 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 and watch it flow
Each pattern includes:
- Complete CSS styling
- Tailwind-compatible code
- Responsive implementation
- Cross-browser compatibility
- Smooth animations
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 flowing patterns:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-flowing-pattern- 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", "Flow"
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 have smooth flow
- Performance: Optimize for rendering performance
- Responsiveness: Test patterns across different screen sizes
- Uniqueness: Avoid duplicating existing patterns
- Flow: Consider adding subtle animations or transitions
Consider these categories when adding patterns:
- Gradient Flow - Smooth color transitions and animated blends
- Geometric Flow - Moving grids, dots, lines, shapes
- Decorative Flow - Subtle animated background textures
- Minimal Flow - Clean and simple flowing designs
- Test the pattern in the development environment
- Verify responsive behavior and smooth animations
- Check browser compatibility (Chrome, Firefox, Safari, Edge)
- Ensure code validity and formatting
- Test performance impact of animations
- 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 flowing geometric grid pattern"
git push origin feature/new-flowing-patternPixelFlow/
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
- Consider performance impact of animations
This project is open source and available under the MIT License.
- Built with Next.js and Tailwind CSS
- Inspired by modern flowing web design patterns
- Community-driven pattern collection
- Special thanks to the open source community
For questions, issues, or suggestions:
- Open an issue on GitHub
- Check existing issues before creating new ones
- Provide detailed information for bug reports
- Kanugula Shivashanker
- GitHub: @shivas1432
- LinkedIn: shivashanker-kanugula
- Instagram: @ss_web_innovations
- Website: https://www.shivashanker.com
- Telegram: @helpme_coder
If you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!
Happy flowing!