Aura
Ambient UI gradients built with layered CSS blend modes. Backgrounds that feel like light.
What is it?
What it is
Aura is a collection of 200+ layered, atmospheric gradients built from soft blend modes, designed to be previewed live, customized in the browser, and used as backgrounds behind any interface.
Why it exists
Aura exists to provide designers and developers with a rich library of high-quality, light-like gradients that can be easily previewed, customized, and exported for use in web projects, enhancing visual aesthetics without the need for complex manual gradient creation.
Who should use it
Frontend developers, UI/UX designers, and creative coders who want to implement atmospheric gradients in web interfaces. Ideal for those working with React, Next.js, and Tailwind CSS who need live preview capabilities and multiple export formats.
Who should avoid it
Backend developers without frontend experience, designers unfamiliar with CSS/TypeScript, or teams restricted from using MIT-licensed open-source tools. Not suitable for those needing server-side gradient generation only.
How it works
A quick walkthrough in plain English
How Aura works
Step 1 of 3
You interact with it
Open Aura, send a request, or connect it to your stack.
Features
Advantages
- Built with modern stack: Next.js, React, Tailwind CSS, TypeScript
- MIT license allows free use and modification
- Over 200 pre-built atmospheric gradients
- Real-time glow effects that adapt to light and dark themes
- No external dependencies required for core functionality
- Developer-friendly export options for multiple frameworks
- Intuitive UI for both designers and developers
- Active community with 336 GitHub stars
Disadvantages
- Limited to gradient-focused use cases only
- Requires Node.js environment to run locally
- May have performance overhead with complex multi-layer gradients
- No built-in animation controls for gradients
- Lacks advanced color picker features like HSL or LAB modes
- No direct integration with design tools like Figma or Sketch
- Export formats are limited to web technologies only
Installation
native
pnpm install pnpm dev pnpm build pnpm lint
FAQ
How do I start the Aura development server?
Install dependencies with `pnpm install`, then run `pnpm dev` to start the development server. Open http://localhost:3000 in your browser to view the app.
What package manager does Aura use?
Aura uses pnpm. Install dependencies with `pnpm install` and use the pnpm scripts (`pnpm dev`, `pnpm build`, `pnpm lint`) for all commands.
How can I preview a gradient before using it?
Hover over any gradient card to instantly preview the gradient. You can also open the fullscreen viewer for next/prev navigation and keyboard shortcuts.
What export formats are available for gradients?
You can copy clean code in CSS, Tailwind, CSS Variables, or CSS-in-JS formats. There's also a 'Copy All' option to grab every format at once, plus PNG and SVG downloads.
Can I generate custom gradients in the browser?
Yes, the built-in customizer lets you add, remove, and reorder layers, tweak blend modes, blur, opacity, and base color. It also includes a grain overlay toggle and undo/redo functionality.
How do I use a gradient in another project?
Use the AI Prompt feature to copy a ready-to-paste prompt for ChatGPT, Claude, or Copilot that rebuilds the gradient in any project, or export the code directly in your preferred format.
Featured in Videos
YouTube tutorials and walkthroughs for Aura
Alternatives
Similar projects ranked by category, topics, and text overlap.
