Custom CSS styles the alert box — Vortexia moves the whole scene behind it
Custom CSS styles the alert box; it cannot animate what sits behind it. Vortexia is the layer behind it, reacting to Streamlabs donations, subs and follows.
What is The Background That Reacts When Your Alert Fires?
Custom CSS and Vortexia do different jobs. The Custom CSS box in an OBS Browser Source restyles a web page such as your Streamlabs alert box, and its default, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, is what lets an alert float over your scene. It cannot animate what sits behind the alert. Vortexia is that layer: a full-scene visual you add as its own Browser Source beneath your alert box. Paste your Streamlabs Socket API Token into the dashboard, on the free plan, and donations, subs, resubs, follows, bits, raids and hosts each set off their own effect across the whole background, in step with the alert. A bigger donation hits harder and lasts longer. Vortexia draws a solid frame, so no CSS makes it transparent; keep it underneath the alert box.
How to use The Background That Reacts When Your Alert Fires
Add Vortexia to your scene. Copy your OBS link from the Vortexia dashboard and add it as a Browser Source.
Put it behind the alert. Drag the Vortexia source below your Streamlabs alert box in the source list.
Connect Streamlabs. Paste your Streamlabs Socket API Token into the dashboard’s Platforms tab.
Test it. Press Test Event next to the Streamlabs connection and watch the background react.
Specs & output
Engine
Chaos Prime
Render Mode
genesis
Iteration Depth
50
Default Zoom
0.80
Colour Shift
260°
Output (Free)
720p / 30fps + watermark
Output (Plus)
1080p / 60fps, no watermark
Output (Pro)
4K / 60fps, brand-kit logo overlay
Audio Source
Browser tab audio (FFT, real-time)
Last Updated
2026-09-28
Frequently asked questions
What is the default Custom CSS in an OBS Browser Source?
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }. It makes the page background see-through, removes the margin and hides scrollbars, which is why a widget such as an alert box shows only its own graphics. Leave it as it is on a Vortexia source.
Can CSS make Vortexia transparent?
No. Vortexia paints every pixel of a solid frame, so there is no empty background for CSS to reveal. Put it below your webcam, game and alert box in the source list.
How does it connect to Streamlabs?
Get your Socket API Token from the Streamlabs dashboard under Settings, API Tokens, and paste it into the Streamlabs field in the Vortexia dashboard’s Platforms tab. It is available on the free plan.
Which Streamlabs events does it react to?
Donations, subscriptions and resubs, follows, bits, raids and hosts. Each has its own effect, and a donation’s strength and length grow with its amount.
Does it replace my alert box?
No. Your alert box still shows the name, sound and message. Vortexia changes the whole background at the same moment, so the scene reacts as well as the corner of it.
About the author
The Vortexia team — Makers of the Vortexia engine.
The Vortexia team builds a browser-based, GPU-accelerated audio-reactive visual engine used by streamers and DJs on Twitch, Kick, YouTube Live and TikTok Live.