Skip to content

Repository files navigation

Frame 1116606756 (1) (1)

Backgrounds that feel like light

200+ layered, atmospheric gradients built from soft blend modes — preview them live, tweak them in the browser, and drop them behind any interface.

Next.js React Tailwind CSS TypeScript GitHub

Captura de pantalla 2026-08-12 140449 (1)

Features

Live Preview

  • Hover any card to preview the gradient instantly
  • Fullscreen viewer with next/prev navigation and keyboard shortcuts
  • The whole page picks up the active gradient's glow — light and dark themes included

Customizer

  • In-browser aura gradient generator — add/remove/reorder layers, tweak blend modes, blur, opacity, and base color
  • Grain overlay toggle for an analog film finish
  • Undo/redo as you experiment

Export

  • Copy clean code in CSS, Tailwind, CSS Variables, or CSS-in-JS
  • Copy All grabs every format in one block
  • Download the gradient as PNG or SVG

AI Prompt

  • One click copies a ready-to-paste prompt for ChatGPT, Claude, or Copilot that rebuilds the gradient in any project

Screenshot

localhost_3000__g=aurora-borealis (1)

Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

Open http://localhost:3000

Command Description
pnpm dev Start dev server
pnpm build Production build
pnpm lint Run ESLint

Contributors

Contributions are welcome! Check the issues or open a pull request.

License

MIT

About

Ambient UI gradients built with layered CSS blend modes. Backgrounds that feel like light.

Topics

Resources

Stars

388 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages