I wanted to play around with animated circular gradients for an interaction in interface0. Seemed like a perfect candidate project to vibecode. So here we are.

Generate your own by trying out all the settings! My favorite blend modes are “normal” and “plus lighter.”

Interactive Gradient Generator

Colors

Settings

Actions

Paste Configuration

The output is pretty simple pure HTML+CSS and can be easily tweaked and embedded anywhere. For example, here’s the outputted code for the default settings:

<style>
.gradient-circle-mask {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    background: #fffcf0;
    --pulse-scale: 1.06;
    animation: gradient-pulse 2.857142857142857s infinite ease-in-out;
}
.gradient-container {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: #fffcf0;
    animation: gradient-rotate 40s infinite linear;
}
@keyframes gradient-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gradient-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(var(--pulse-scale, 1.06)); }
    100% { transform: scale(1); }
}
.gradient-blob {
    position: absolute;
    width: 50%;
    height: 50%;
    filter: blur(40px);
    opacity: 1;
    mix-blend-mode: normal;
}
@keyframes gradient-float1 {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    12% { transform: translate(-35%, -75%) rotate(23deg) scale(1.15); }
    23% { transform: translate(-25%, -45%) rotate(67deg) scale(0.95); }
    31% { transform: translate(-65%, -30%) rotate(134deg) scale(1.3); }
    47% { transform: translate(-70%, -60%) rotate(189deg) scale(1.05); }
    58% { transform: translate(-40%, -25%) rotate(245deg) scale(1.2); }
    69% { transform: translate(-20%, -70%) rotate(298deg) scale(0.9); }
    84% { transform: translate(-60%, -40%) rotate(356deg) scale(1.1); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes gradient-float2 {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1.1); }
    15% { transform: translate(-80%, -35%) rotate(45deg) scale(0.85); }
    28% { transform: translate(-30%, -80%) rotate(112deg) scale(1.25); }
    41% { transform: translate(-15%, -20%) rotate(178deg) scale(1.05); }
    54% { transform: translate(-75%, -25%) rotate(223deg) scale(0.95); }
    67% { transform: translate(-45%, -75%) rotate(289deg) scale(1.35); }
    82% { transform: translate(-25%, -45%) rotate(334deg) scale(1.15); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.1); }
}
@keyframes gradient-float3 {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); }
    9% { transform: translate(-65%, -70%) rotate(31deg) scale(1.2); }
    21% { transform: translate(-20%, -35%) rotate(89deg) scale(1.05); }
    34% { transform: translate(-75%, -15%) rotate(156deg) scale(0.8); }
    43% { transform: translate(-35%, -85%) rotate(201deg) scale(1.4); }
    56% { transform: translate(-10%, -50%) rotate(267deg) scale(1.1); }
    71% { transform: translate(-80%, -45%) rotate(312deg) scale(0.95); }
    85% { transform: translate(-40%, -20%) rotate(378deg) scale(1.25); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.9); }
}
@keyframes gradient-float4 {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1.05); }
    18% { transform: translate(-30%, -20%) rotate(52deg) scale(1.3); }
    29% { transform: translate(-85%, -65%) rotate(98deg) scale(0.75); }
    44% { transform: translate(-15%, -75%) rotate(167deg) scale(1.15); }
    61% { transform: translate(-70%, -10%) rotate(234deg) scale(1.4); }
    76% { transform: translate(-25%, -55%) rotate(301deg) scale(0.9); }
    91% { transform: translate(-60%, -80%) rotate(349deg) scale(1.2); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.05); }
}
</style>

<div class="gradient-circle-mask">
    <div class="gradient-container">
        <div class="gradient-blob" style="background: radial-gradient(circle at center, #ff006e 0%, #ff006ecc 30%, #ff006e66 60%, transparent 80%); left: 50%; top: 16%; transform: translate(-50%, -50%); animation: gradient-float1 15.333333333333334s infinite ease-in-out;"></div>
        <div class="gradient-blob" style="background: radial-gradient(circle at center, #8338ec 0%, #8338eccc 30%, #8338ec66 60%, transparent 80%); left: 84%; top: 50%; transform: translate(-50%, -50%); animation: gradient-float2 12.666666666666666s infinite ease-in-out;"></div>
        <div class="gradient-blob" style="background: radial-gradient(circle at center, #3a86ff 0%, #3a86ffcc 30%, #3a86ff66 60%, transparent 80%); left: 50%; top: 84%; transform: translate(-50%, -50%); animation: gradient-float3 11.333333333333334s infinite ease-in-out;"></div>
        <div class="gradient-blob" style="background: radial-gradient(circle at center, #06ffa5 0%, #06ffa5cc 30%, #06ffa566 60%, transparent 80%); left: 16%; top: 50%; transform: translate(-50%, -50%); animation: gradient-float4 8.666666666666666s infinite ease-in-out;"></div>
    </div>
</div>

Looking for more to read?

Want to hear about new essays? Subscribe to my roughly-monthly newsletter recapping my recent writing and things I'm enjoying:

And I'd love to hear from you directly: andy@andybromberg.com