AuraBackground provides 100+ handcrafted CSS background patterns and gradient snippets built with clean CSS & Tailwind CSS. Copy, paste, and integrate instantly into your web projects.
This project is built using Next.js and Tailwind CSS, optimized for performance, SEO, and developer experience.
First, install dependencies:
npm install
# or
yarn
# or
pnpm install
# or
bun installThen run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to see the app.
The page will auto-update whenever you modify a file thanks to Next.js Fast Refresh.
You can start editing the homepage by modifying:
app/page.tsx
Over 100+ modern CSS background patterns, fully editable and responsive.
Beautiful gradient combinations ready for Tailwind or raw CSS.
See your pattern or gradient live before copying the code.
Copy full CSS or Tailwind snippet instantly.
Fully responsive and theme-aware components.
Designed with clean typography, smooth transitions, and subtle animations.
Search patterns using a fast debounced search system.
SEO-optimized, metadata-rich, fast, modern Next.js app.
- Next.js 14+ (App Router)
- React 18
- Tailwind CSS
- Shadcn UI
- Geist Font
- Lucide Icons
- TypeScript
- Vercel Analytics + Speed Insights
aura-background/
│── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── api/...
│
│── components/
│ ├── ui/...
│ ├── patterns/...
│ └── providers/...
│
│── data/
│ ├── seo.ts
│ └── patterns.ts
│
│── public/
│── styles/
│── lib/
│── README.md
| Command | Description |
|---|---|
npm run dev |
Start local development server |
npm run build |
Build production bundle |
npm run start |
Run the production server |
npm run lint |
Run ESLint |
Useful resources to learn Next.js:
- 👉 Next.js Documentation: https://nextjs.org/docs
- 👉 Interactive Next.js Tutorial: https://nextjs.org/learn
- 👉 Next.js GitHub Repo: https://github.com/vercel/next.js
The easiest and recommended way to deploy is through Vercel, creators of Next.js.
Deploy now:
🔗 https://vercel.com/new?filter=next.js&utm_source=create-next-app
Read the full deployment guide:
📘 https://nextjs.org/docs/app/building-your-application/deploying
PRs and contributions are welcome!
- Fork this repository
- Create a new branch
- Commit your improvements
- Open a Pull Request
Name: Sangram03 Project: AuraBackground GitHub: https://github.com/Sangram03
Please consider:
- ⭐ starring the repo
- 🔁 sharing it
- 🤝 contributing
If you want, I can also:
✔ Add badges (Vercel, TypeScript, Next.js) ✔ Add screenshot previews ✔ Add a table of patterns ✔ Add license section