CSS: Flickering Lightbulb Effect

I’m an old timey guy who likes old timey things. I’m a sucker for an old diner or dive bar where the sign flickers and then stays bright, showing that it’s trying and ultimately, succeeding. It reminds me of Early Times whiskey, and how it doesn’t taste like the future, it tastes like the past. But that’s another story.

You might want to add this effect somewhere on your website, it’s fairly easy. Either add this to your stylesheet or Blocks / Elementor / Gutenberg as a CSS class. This is the class: flicker-lightbulb (i’ve provided an alternative class below if you like a slightly different style).

Here’s the CSS, feel free to copy and paste:

/* Old Timey Lightbulb Flickering Effect */
.flicker-lightbulb {
    animation: lightbulb-flicker 4s ease-out forwards;
    animation-delay: 0.5s; /* Small delay before starting, adjust if you like */
}

@keyframes lightbulb-flicker {
    0% { 
        opacity: 0;
        filter: brightness(0);
    }
    2% { 
        opacity: 1;
        filter: brightness(1.2);
    }
    4% { 
        opacity: 0.3;
        filter: brightness(0.3);
    }
    6% { 
        opacity: 1;
        filter: brightness(1.1);
    }
    8% { 
        opacity: 0.1;
        filter: brightness(0.1);
    }
    10% { 
        opacity: 0.9;
        filter: brightness(1);
    }
    12% { 
        opacity: 0.2;
        filter: brightness(0.2);
    }
    14% { 
        opacity: 1;
        filter: brightness(1.3);
    }
    16% { 
        opacity: 0.4;
        filter: brightness(0.4);
    }
    18% { 
        opacity: 1;
        filter: brightness(1.1);
    }
    20% { 
        opacity: 0.1;
        filter: brightness(0.1);
    }
    22% { 
        opacity: 0.8;
        filter: brightness(0.8);
    }
    25% { 
        opacity: 1;
        filter: brightness(1.2);
    }
    27% { 
        opacity: 0.3;
        filter: brightness(0.3);
    }
    30% { 
        opacity: 1;
        filter: brightness(1);
    }
    32% { 
        opacity: 0.6;
        filter: brightness(0.6);
    }
    35% { 
        opacity: 1;
        filter: brightness(1.1);
    }
    38% { 
        opacity: 0.8;
        filter: brightness(0.8);
    }
    42% { 
        opacity: 1;
        filter: brightness(1);
    }
    45% { 
        opacity: 0.9;
        filter: brightness(0.9);
    }
    50% { 
        opacity: 1;
        filter: brightness(1);
    }
    55% { 
        opacity: 0.95;
        filter: brightness(0.95);
    }
    65% { 
        opacity: 1;
        filter: brightness(1);
    }
    75% { 
        opacity: 0.98;
        filter: brightness(0.98);
    }
    85% { 
        opacity: 1;
        filter: brightness(1);
    }
    95% { 
        opacity: 0.99;
        filter: brightness(0.99);
    }
    100% { 
        opacity: 1;
        filter: brightness(1);
    }
}

/* Alternative version with glow effect, use the class below if you prefer that style - AF */
.flicker-lightbulb-glow {
    animation: lightbulb-flicker-glow 4s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes lightbulb-flicker-glow {
    0% { 
        opacity: 0;
        filter: brightness(0);
        box-shadow: none;
    }
    2% { 
        opacity: 1;
        filter: brightness(1.2);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    4% { 
        opacity: 0.3;
        filter: brightness(0.3);
        box-shadow: none;
    }
    6% { 
        opacity: 1;
        filter: brightness(1.1);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
    8% { 
        opacity: 0.1;
        filter: brightness(0.1);
        box-shadow: none;
    }
    10% { 
        opacity: 0.9;
        filter: brightness(1);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    }
    12% { 
        opacity: 0.2;
        filter: brightness(0.2);
        box-shadow: none;
    }
    14% { 
        opacity: 1;
        filter: brightness(1.3);
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    }
    16% { 
        opacity: 0.4;
        filter: brightness(0.4);
        box-shadow: none;
    }
    18% { 
        opacity: 1;
        filter: brightness(1.1);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
    20% { 
        opacity: 0.1;
        filter: brightness(0.1);
        box-shadow: none;
    }
    22% { 
        opacity: 0.8;
        filter: brightness(0.8);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    }
    25% { 
        opacity: 1;
        filter: brightness(1.2);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    27% { 
        opacity: 0.3;
        filter: brightness(0.3);
        box-shadow: none;
    }
    30% { 
        opacity: 1;
        filter: brightness(1);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    }
    32% { 
        opacity: 0.6;
        filter: brightness(0.6);
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
    }
    35% { 
        opacity: 1;
        filter: brightness(1.1);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
    50% { 
        opacity: 1;
        filter: brightness(1);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    75% { 
        opacity: 0.98;
        filter: brightness(0.98);
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
    }
    100% { 
        opacity: 1;
        filter: brightness(1);
        box-shadow: none;
    }
}

/* 
USAGE:
1. Add this CSS to your theme's style.css or Elementor's Custom CSS
2. Add class "flicker-lightbulb" or "flicker-lightbulb-glow" to your Elementor widget
3. Effect plays once on page load after 0.5s delay

CUSTOMIZATION:
- Duration: Change "4s" to adjust total time
- Delay: Modify "animation-delay: 0.5s" 
- Repeat: Add "infinite" after duration to loop
- Intensity: Adjust opacity values (0-1) for stronger/weaker flickers
- It's not pretty but it is nostalgic. 
*/