gradient background pulse breathing hero enterprise depth animation enterprise SaaS hero section background animated full-bleed section divider product launch page atmosphere static gradients feel flat and lifeless WebGL/canvas overkill for a simple depth effect need ambient motion without distracting from content
Pulse Gradient
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/pulse-gradient.json Hello, World
This element animates in
Background
Customize
Quick Start
<section class="bg-pulse-gradient min-h-screen">...</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 674 bytes · 31 lines
- Custom Properties
-
--pulse-from--pulse-via--pulse-to--pulse-duration - Classes
-
.bg-pulse-gradient
gradient background pulse breathing hero enterprise depth animation
Apply .bg-pulse-gradient to any container that should have a living, breathing dark gradient background.
The animation cycles background-size between 100% 100% and 100% 145%, causing the gradient to gently expand and contract — a depth illusion without any JavaScript.
Customize via CSS custom properties:
--pulse-from— top color stop (default: deep navyoklch(15% 0.04 240))--pulse-via— midpoint color stop (default:oklch(18% 0.06 240))--pulse-to— bottom accent stop (default: electric blueoklch(55% 0.18 220))--pulse-duration— one cycle length (default:5s)
Animation is disabled when the user prefers reduced motion; the background-size is fixed at 125% to preserve the gradient’s depth composition.