This free stream alert maker and custom CSS generator lets you design an animated follower, subscriber, tip, raid or cheer alert for your stream — then copy the CSS and HTML to paste into your alert box on OBS, Streamlabs or StreamElements. Pick your fonts, colors, box style and entrance animation, watch it play live, and ship a clean custom alert in minutes. No signup, no watermark, everything runs in your browser.
How to use the alert CSS in Streamlabs or StreamElements
In your alert box widget settings, open the Custom CSS (Streamlabs) or the CSS tab of the overlay editor (StreamElements) and paste the CSS generated here. The styles target the .alert-box, .alert-main, .alert-sub and .alert-img classes — rename them to match your widget's elements if needed. For a fully custom build, use the copied HTML as an OBS Browser Source starting point.
Follower, sub, tip, raid and cheer alerts
Switch the alert type to load a sensible default message, then edit the wording. Use the {user} and {amount} tokens where the viewer's name and value should appear — the live preview fills in your sample name and amount so you can see the real thing. Your platform swaps in the correct tokens when the alert fires.
Animations that grab attention
Choose from fade, slide, pop, bounce, flip and zoom entrances, and tune the duration. A little motion makes new followers and donations pop on screen without being distracting. Hit Replay as many times as you like to fine-tune the timing.
Frequently asked questions
How do I add custom alert CSS to Streamlabs?
Open your Alert Box widget, scroll to Custom CSS, and paste the CSS copied here. Adjust the class names if your widget uses different ones, then save and test the alert.
Does this work with StreamElements and OBS?
Yes. Paste the CSS into the StreamElements overlay CSS editor, or use the copied HTML and CSS together as an OBS Browser Source for a fully custom alert.
Can I use my own alert image or GIF?
Yes. Paste an image or GIF URL into the image field and it appears above the text. In the live preview it loads from that URL, and the same URL is used in the exported HTML.
What do {user} and {amount} mean?
They're placeholders for the viewer's name and the value (tip amount, bits or raid viewers). The preview fills your sample values; your streaming platform replaces them with real data when an alert fires.
Is the alert maker free?
Completely free, with no signup or watermark. Design and copy as many alert styles as you like.
More free tools for streamers
Browse the full free tools hub — including a webcam overlay maker, a Starting Soon screen maker and a fake chat generator.
Last updated: July 2026