Soft, animated, blurred color blobs blending into an atmospheric background. The 2025 SaaS aesthetic — Stripe, Linear, Vercel all use it.
Aurora (also called mesh gradient) backgrounds use multiple soft, blurred color "blobs" that blend together into a smooth, organic, atmospheric surface. They give a page depth and motion without being noisy. Think of the Northern Lights — that's the visual reference. Especially popular in 2024–2025 SaaS, AI tool homepages, and dark-theme product sites.
Three or four absolutely-positioned circles, each with a different color, are placed at varied positions inside a container with overflow: hidden. They get a heavy filter: blur(60px) applied to the parent (or each blob), which softens them into clouds. mix-blend-mode: screen lets their edges blend additively, producing the aurora glow. A subtle CSS animation drifts each blob slowly to add motion. A noise texture overlay prevents banding on big gradients.
backdrop-filter: blur(20px) saturate(160%)) — the glass picks up tints of the gradient behind it. That combination is the signature look of modern AI-tool landing pages.Living, drifting gradients behind frosted glass. The page feels alive without spending an ounce of attention.
Try it free →Hot pink, cyan, violet, amber — drifting on staggered cycles.
Heavy blur turns small shapes into atmospheric clouds.
Edges blend additively — colors brighten where they meet.
Build an aurora / mesh gradient hero section. Container: dark background (#060611), position:relative, overflow:hidden. Inside, create 4 absolutely-positioned divs as "blobs": each is a circle (border-radius:50%, width:400-600px), with a different vivid color (hot pink #FF6B9D, cyan #00E5FF, violet #7C5CFF, amber #F59E0B), and positioned at different corners. Wrap all 4 blobs in a child container with filter:blur(60px) saturate(140%). Apply mix-blend-mode:screen on each blob so they blend additively. Animate each blob with @keyframes drift that slowly translates it 40-60px in random directions over 18-26 seconds (use different animation-delay on each so they desync). Add a subtle SVG noise overlay at opacity:0.08 to prevent color-banding. Layer the hero text and a frosted-glass card with backdrop-filter:blur(20px) on top — the glass should pick up tints of the aurora behind it.