Tailwind UI Pattern Registry for humans and agents

orb glow ambient blob decorative ambient glowing background decoration hero section atmospheric orbs floating decorative blobs behind content backgrounds lack visual depth need glowing ambient decorations without images want pulsing orb effects for modern aesthetics

Orb

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/orb.json
Format
Ambient Orbs Soft floating light forms for hero backgrounds
Stage Background
Customize

Quick Start

<div class="orb" style="--orb-color: oklch(0.6 0.3 300)"></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
872 bytes · 38 lines
Custom Properties
--orb-size--orb-color--orb-blur--orb-pulse-duration
Classes
.orb.orb-pulse
orb glow ambient blob decorative

Soft, glowing decorative orbs created with radial-gradient and filter: blur(). Two variants: .orb (static) and .orb-pulse (gentle breathing animation).

Ambient background orbs

<section class="relative overflow-hidden">
  <div class="orb-pulse absolute -top-20 -left-20 opacity-50"
       style="--orb-color: oklch(0.6 0.3 280)"></div>
  <div class="orb absolute -bottom-10 -right-10 opacity-40"
       style="--orb-color: oklch(0.55 0.25 330)"></div>
  <div class="relative z-10 p-16 text-white">
    <h1 class="text-4xl font-bold">Content above orbs</h1>
  </div>
</section>