Glow
A soft pulsing glow effect that oscillates brightness and box-shadow intensity. Great for ambient state indicators, active-status badges, or highlighting elements with a warm luminous aura.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
glowpulseambientsoft
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A soft pulsing glow effect for ambient state feedback or highlighting.
CSS
css
.glow {
width: 64px; height: 64px;
background: #f59e0b;
border-radius: 12px;
box-shadow: 0 0 15px #f59e0b;
animation: glow 1.5s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 15px #f59e0b; filter: brightness(1); }
50% { box-shadow: 0 0 40px #f59e0b; filter: brightness(1.3); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="glow"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.glow {
width: 64px; height: 64px;
background: #f59e0b;
border-radius: 12px;
box-shadow: 0 0 15px #f59e0b;
animation: glow 1.5s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 15px #f59e0b; filter: brightness(1); }
50% { box-shadow: 0 0 40px #f59e0b; filter: brightness(1.3); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>