Aura Gradient Studio

206 layered ambient gradients with blend modes — preview live, tweak, and export the code.

Aura Gradient Studio — 206 layered ambient gradients with blend modes, a customizer, and CSS, Tailwind, SVG, PNG exports

How to use Aura Gradient Studio

  1. Search the 206 gradients or filter by category, mood and light/dark.
  2. Click any gradient to preview it large and step through with Prev/Next.
  3. Open the Customizer to change blend modes, blur, opacity, base colour and grain.
  4. Pick an export format: CSS, Tailwind, CSS Variables, CSS-in-JS or AI prompt.
  5. Download the gradient as SVG or PNG, or copy all formats at once.

Features

  • All 206 gradients from the Aura catalogue across 8 categories: aura, mesh, nebula, prism, lattice, grain, glass, flux
  • Every layer renders for real: background, mix-blend-mode, blur and opacity
  • Live customizer: add/remove/reorder layers, tweak blend, blur, opacity, base and grain
  • Fullscreen viewer with next/prev navigation and keyboard shortcuts
  • Export in CSS, Tailwind, CSS Variables or CSS-in-JS, plus a ready-to-paste AI prompt
  • Download as SVG (parsed gradient stops) or PNG (rendered on canvas)

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.