Ambient Glow Background
The dark product hero look: two soft accent glows bleed in from opposite corners and slowly breathe, under a hairline of light along the top edge. Quiet enough to sit behind copy.
Also known as: dark animated background css, dark hero glow background, subtle glow corners css.
HTML
<div class="bgx-ambient-glow" aria-hidden="true"><span></span><span></span></div>
CSS
.bgx-ambient-glow {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: #09090b;
}
.bgx-ambient-glow span {
position: absolute;
left: var(--x);
top: var(--y);
width: max(30em, 60%);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--o), transparent);
animation: bgx-ambient-glow-pulse 6s cubic-bezier(0.4, 0, 0.6, 1) var(--d) infinite;
}
.bgx-ambient-glow span:nth-child(1) { --x: 6%; --y: 0%; --d: 0s; --o: oklch(from var(--c) 0.62 0.2 calc(h + 0) / 0.62); }
.bgx-ambient-glow span:nth-child(2) { --x: 94%; --y: 100%; --d: -3s; --o: oklch(from var(--c) 0.62 0.22 calc(h + 60) / 0.52); }
.bgx-ambient-glow::after {
content: "";
position: absolute;
left: 15%;
right: 15%;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, oklch(from var(--c) 0.88 0.1 calc(h + 0) / 0.95), transparent);
}
@keyframes bgx-ambient-glow-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-ambient-glow, .bgx-ambient-glow *, .bgx-ambient-glow::before, .bgx-ambient-glow::after, .bgx-ambient-glow *::before, .bgx-ambient-glow *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="absolute inset-0 overflow-hidden bg-[#09090b]" aria-hidden="true"> <div class="absolute -left-40 -top-48 h-[28rem] w-[28rem] animate-pulse rounded-full bg-blue-500/30 blur-3xl [animation-duration:6s]"></div> <div class="absolute -bottom-48 -right-40 h-[28rem] w-[28rem] animate-pulse rounded-full bg-fuchsia-500/25 blur-3xl [animation-delay:-3s] [animation-duration:6s]"></div> <div class="absolute inset-x-[15%] top-0 h-px bg-gradient-to-r from-transparent via-blue-300/80 to-transparent"></div> </div>
Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.