Aura: a Next.js gallery and customizer for 200+ layered CSS gradients

What Aura actually ships, and who reaches for it

Aura is a Next.js application that presents a catalogue of more than 200 gradients, each built from several layers combined with CSS blend modes. The README describes the result as "Backgrounds that feel like light", which is the whole pitch: soft, atmospheric backdrops rather than the two-stop linear gradients most UI kits hand out. The repository topics name the same territory: aura-gradients, gradient-generator, gradient-make, mesh-gradient.

The audience is narrow and specific. It is for front-end developers and designers who need a background for a landing page, a hero section, an app shell or a presentation, and who would rather browse a live gallery than write layer stacks by hand. It is also for people who want to tune an existing preset: the customizer lets you add, remove and reorder layers and adjust blend modes, blur, opacity and base color. If your need is a runtime gradient component with props and a documented API, this is not that. The package.json sets "private": true and exposes no library entry point, so Aura is consumed as a site or as source you copy from, not as an installed dependency.

Layers, blend modes and the export formats

The mechanism is layered CSS. A gradient in Aura is a stack: a base color plus multiple gradient layers, each with its own blend mode, blur and opacity, composited by the browser. That is why the output feels like light rather than paint. A single linear-gradient cannot produce that overlap; several translucent layers with different blend modes can.

The repository layout matches this. There is an app/ directory for routes, components/ for the UI, hooks/ for React hooks, and lib/ for shared logic, with components.json indicating a shadcn-style component setup. The README documents four export formats: CSS, Tailwind, CSS Variables, and CSS-in-JS. Copy All collects every format in one block, and Download writes the gradient as PNG or SVG. The PNG and SVG paths are the reason html-to-image appears in dependencies alongside @iconify/react, prism-react-renderer, next, react and react-dom.

One detail worth noting for anyone expecting a data-driven catalogue: there is no JSON schema or gradient data file named in the README. The presets live somewhere in lib/ or app/, and you would have to read the source to learn the shape. That is fine for copying CSS out of the UI. It is a problem if you wanted to generate pages from the preset list programmatically.

Installing Aura and exporting your first gradient

The README gives a two-command quick start using pnpm. Run it from the repository root:

# Install dependencies
pnpm install

# Start development server
pnpm dev

The README states that the dev server is reachable at http://localhost:3000. The command table lists pnpm dev for the dev server, pnpm build for a production build, and pnpm lint to run ESLint. package.json also defines a start script mapped to next start, which the README table does not mention, so you can serve a production build with pnpm build followed by pnpm start.

Once the page loads, the workflow is browse, tune, export. Hovering a card previews that gradient, and the fullscreen viewer adds next and previous navigation with keyboard shortcuts. From there you open the customizer, add or remove layers, change blend modes, blur, opacity and base color, and toggle the grain overlay if you want the film finish. Undo and redo are available while you experiment.

When the result looks right, the export panel offers CSS, Tailwind, CSS Variables and CSS-in-JS. Copy the format your project already uses and paste it into your stylesheet or component. The README also describes an AI Prompt button that copies a prompt for ChatGPT, Claude or Copilot to rebuild the gradient in another project, and a Download button that writes PNG or SVG. If you want the raw asset rather than code, use Download; if you want it in your build, use one of the four code formats.

Where Aura stops being the right tool

The first limitation is packaging. Because the package is private and defines no exports field, there is no supported way to import Aura as a dependency and render a gradient from a preset ID. You either use the hosted site, run the app yourself, or copy exported code. Teams that want a versioned, typed gradient component with a stable API will find nothing here to install.

The second is documentation depth. The README covers features, a quick start and a command table. It does not describe how presets are stored, whether the export formats stay stable across releases, or how to deploy the app. There are no releases retrieved, and version 0.1.0 in package.json signals an early project; the last push to main was on 2026-08-17. The presence of AGENTS.md and CLAUDE.md at the repository root suggests the project is partly developed with AI coding assistants, which says nothing about quality but does mean you should read the source before assuming conventions.

The third is scope. Aura generates backgrounds. It has no contrast checking, no reduced-motion handling, and no accessibility guidance in the README. A heavy multi-layer gradient with a grain overlay sits behind your text, and nothing in the tool tells you whether your body copy still passes contrast. If accessibility is a hard requirement, treat the exported CSS as a starting point and verify the result yourself.

Aura against hand-written CSS and utility-class gradients

The obvious alternative is writing the gradient yourself, either as raw CSS or with a utility framework's gradient classes. The difference is not capability, since both produce CSS the browser composites the same way. The difference is iteration cost and discovery. Aura gives you a gallery to browse, a live customizer with layer reordering and undo, and four export formats from one screen. Hand-written CSS gives you full control and zero dependency on a Next.js app, but you have to imagine the result before you see it.

A second alternative is a general-purpose design tool that exports CSS. Those tend to be broader and heavier, and their output is usually a flat background image or a single gradient rather than a layer stack with named blend modes. Aura's output is code you can read and edit, which matters if the person maintaining it later is not the person who generated it.

The trade-off is honest: Aura is faster to explore and slower to integrate at scale, because there is no package to import. If you need one gradient for one page, the site is enough. If you need fifty gradients wired into a design system, you will spend the saved time reading lib/ and building the abstraction Aura does not provide.

Licence, maintenance and what upgrades cost you

The README states MIT, and the repository contains a LICENSE file, which is the text to read if you need the exact terms. MIT is permissive: you can use, modify and redistribute the code, including commercially, provided the copyright notice and permission notice travel with it. That matters most if you copy exported CSS or lift components into a closed product. This is a description of the licence, not legal advice; check the LICENSE file and your own obligations.

Upgrade cost is low in one direction and undefined in another. Copying exported CSS into your project creates no ongoing dependency: the gradient is yours and nothing breaks when Aura changes. Running the app or vendoring its components ties you to a Next.js 16.3.0, React 19.2.8 and Tailwind 4 stack, so upgrades follow those projects. The last push was on 2026-08-17, and there are no tagged releases, so there is no changelog to read before pulling. If you fork it, pin the versions in package.json and pnpm-lock.yaml and treat upstream changes as optional.

Editorial conclusion

Adopt Aura if you want to browse and tune a layered gradient in a browser and paste the exported CSS, Tailwind, CSS variables or CSS-in-JS into your own project, or if you want to run the Next.js app locally and edit lib/ and components/ to add your own presets. Skip it if you need a published npm package, a documented JSON schema for the gradient definitions, or a server-side API: the README documents none of these, and package.json marks the package private with no exports. Before committing, run pnpm build to confirm the app compiles, inspect lib/ to see how gradients are stored and whether that shape is stable enough to depend on, and check the LICENSE file rather than the README badge for the exact MIT text.

Frequently asked questions

Official sources

1. CristianOlivera1/Aura on GitHub
2. Issues
3. License: MIT
4. Project website
5. README