First run
- Step 1
Open Overlays and select the specific element whose appearance you want to change.
- Step 2
Choose a ready-made style or set text, graphics, background, border and opacity.
- Step 3
In the preview, adjust X, Y, scale and animations. Save your changes before testing the saved configuration.
- Step 4
Copy the source link and add it in OBS or LIVE Studio. Set the same source dimensions as in the panel.
Broadcast example
The chat should occupy the left side, the timer should occupy the upper right corner, and the alert should appear in the center. You set each source separately. The position container and animated element allow you to change position without overwriting the animation effect.
Action and possibilities
Appearance and performance
The Tools section is for thresholds, commands and rules. The Overlay section opens the appearance configuration and preview. The links between them take you to the appropriate section of the settings.
Position and resolution
Set the X, Y, scale, opacity, expansion direction and source resolution. The source dimensions in OBS or LIVE Studio should match the selected resolution. Each overlay has its own link.
Ready-made styles
Simple, Default and Modern set the base look where available. You can adjust the remaining parameters. The shower of hearts and emojis uses the particles' own parameters.
Animation library
You select entry, stay and exit separately. The library contains 35 entry, 35 exit and 15 stay animations. Each phase has its own speed. In chat, the post animation is separated from the movement of the entire list.
Text, background and frames
Choose fonts, sizes, alignment, colors, gradients, background opacity, border shape and color, spacing, shadows and available text effects. The appearance depends on the overlay type, not every type uses all fields.
Record, test and status
The draft preview shows your edits before saving. The Saved Settings Test sends the simulation to the source. The presence status informs about the overlay receiver, not just about the tool being turned on. The links contain access to a private source - do not publish them.
See the interface up close
Click on the illustration to enlarge it. The screenshots show different parts of the setup; the caption explains what to look out for.
Settings and available selections · 131
The list describes the fields of this tool and its binding. Some settings appear after enabling the parent option, adding a rule, connecting the platform or changing the style. Availability may vary by plan. Lists of your own files, votes and connected accounts are populated in your dashboard.
There are no settings matching your search.
Use this placement and animationSwitch
Enables this rule or feature. Data recording itself does not replace turning on the tool and connecting to an active LIVE.
X position · horizontalZipper
The horizontal position of the element in the source area. The preview converts it to the dimensions of the selected resolution.
: 0 … 100 · 0.1
Y position · verticalZipper
The vertical position of the element in the source area. The preview converts it to the dimensions of the selected resolution.
: 0 … 100 · 0.1
Overlay size (%)Zipper
The size of the element relative to its base size, in percent.
: 10 … 300 · 1
Overlay opacityZipper
Opacity of the entire element in percentage. You set the transparency of the background itself separately.
: 0 … 100 · 1
Entries · 35Selection list
An effect triggered when an element appears.
Choices available: Slide up · Slide In Down · Slide from left · Slide from right · Slide In Corner (Top-Left) · Slide In Corner (Bottom-Right) · Fade · Fade In Up · Fade In Down · Fade In Left · Fade In Right · Scale Up / Zoom In · Scale Down · Bounce · Bounce in from below · Bounce In Left · Elastic Grow · Flip In X · Flip In Y · Rotate In · Roll In · Spin Entrance · Clip Path Reveal · Blur In / Focus · Glitch Entrance · Light Speed In · Drop In · Unfold / Origami · Slide & Stretch · Curtain Reveal · Iris Reveal · Diamond Reveal · Arc Entrance · Perspective Rise · Soft Fade Up
Entrance speedZipper
Entry speed; a lower value lengthens the animation.
: 25 … 200 · 5
Staying on screen · 15Selection list
An animation performed while an element is on the screen.
Choices available: None · Shake · Pulsing · Flash · Wobble · Bouncing · Celebration wobble · Jelly wobble · Swing · Glow Pulse · Floating · Orbit · Breathe · Perspective Tilt · Heartbeat · Neon Shimmer
Loop speedZipper
The speed of the effect while on screen.
: 25 … 200 · 5
Exits · 35Selection list
An effect triggered when an element disappears.
Choices available: Slide Out Up · Slide out downward · Slide out to the left · Slide out to the right · Slide Out Corner (Top-Right) · Slide Out Corner (Bottom-Left) · Fade out · Fade Out Up · Fade Out Down · Fade Out Left · Fade Out Right · Scale Down / Zoom Out · Expand and fade · Bounce out · Bounce Out Down · Bounce Out Right · Shrink & Collapse · Flip Out X · Flip Out Y · Rotate Out · Roll Out · Spiral Out · Clip Path Conceal · Blur Out · Glitch Exit · Light Speed Out · Hinge · Expand and fade out · Origami Fold · Dissolve (Thanos Snap) · Iris Close · Diamond Close · Arc Exit · Perspective Retreat · Soft Fade Down
Exit speedZipper
Output speed; a lower value lengthens the animation.
: 25 … 200 · 5
Test hold time (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
: 1 … 9 · .1
Timer colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Timer settings
Second colorColor
The second color to finish the gradient.
Timer settings
GradientSwitch
Enables a transition between two colors in this part of the element.
Timer settings
Show added or removed timeSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Timer settings
ColorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Text styling and animation
Text colorColor
Text color.
Text styling and animation
Second colorColor
The second color to finish the gradient.
Text styling and animation
GradientSwitch
Enables a transition between two colors in this part of the element.
Text styling and animation
Text sizeNumber
Base text size in pixels.
Text styling and animation
: 12 … 72
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Text styling and animation
: 0 … 1 · .05
Padding (px)Number
Internal distance of content from edges.
Text styling and animation
: 0 … 64
Text alignmentSelection list
Alignment of text or content in an element.
Text styling and animation
Choices available: Left · Center · Right
Enable frameSwitch
Enables a frame or border for an item.
Text styling and animation
Frame styleSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Text styling and animation
Choices available: Wavy frame · Classic card · Glass · Outline · Neon · Minimal · Broadcast stripe · Rounded card
Border styleSelection list
How to draw a border.
Text styling and animation
Choices available: Solid · Dashed · Dotted · Double · Wavy
Border colorColor
Border color.
Text styling and animation
Second colorColor
The second color to finish the gradient.
Text styling and animation
GradientSwitch
Enables a transition between two colors in this part of the element.
Text styling and animation
Border width (px)Number
Border thickness.
Text styling and animation
: 0 … 8
Corner radiusNumber
Corner rounding radius.
Text styling and animation
: 0 … 60
Neon glow strengthZipper
The intensity of the neon glow.
Text styling and animation
: 0 … 80
Shadow opacityZipper
Visibility of the neon glow, independent of the main opacity of the element.
Text styling and animation
: 0 … 1 · .05
Enable backgroundSwitch
Turns on the background of the selected element.
Text styling and animation
Background colorColor
The background color of the element.
Text styling and animation
Second colorColor
The second color to finish the gradient.
Text styling and animation
GradientSwitch
Enables a transition between two colors in this part of the element.
Text styling and animation
Background opacityZipper
Covering only the background, without intentionally extinguishing text and content.
Text styling and animation
: 0 … 1 · .05
Element / frame shadowSwitch
Turns on the shadow of this part of the element.
Text styling and animation
Shadow blur / strengthZipper
The intensity or size of an element's shadow.
Text styling and animation
: 0 … 80
Shadow colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Text styling and animation
Shadow opacityZipper
Shadow coverage. Changes the visibility of the shadow without intentionally changing the opacity of the text or background.
Text styling and animation
: 0 … 1 · .05
Horizontal shadow (px)Number
Horizontal shift of the shadow relative to the element.
Text styling and animation
: -60 … 60
Vertical shadow (px)Number
The vertical shift of the shadow relative to the element.
Text styling and animation
: -60 … 60
Element entrance and exit animationSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Text styling and animation
Entrance animationSelection list
An effect triggered when an element appears.
Text styling and animation
Choices available: None · Fade · Slide from left · Slide from right · Slide up · Slide down · Zoom · Bounce · Soft pop · Rotate · 3D flip · Diagonal drift
Exit animationSelection list
An effect triggered when an element disappears.
Text styling and animation
Choices available: None · Fade out · Slide out to the left · Slide out to the right · Fade upward · Slide out downward · Zoom out · Bounce out · Expand and fade · Rotate and fade · Flip and fade · Drift away
Animation duration (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Text styling and animation
: 0 … 2 · .05
Enable text effectsSwitch
Enables this rule or feature. Data recording itself does not replace turning on the tool and connecting to an active LIVE.
Text effects
Text entrance animationSelection list
An effect triggered when an element appears.
Text effects
Choices available: None · Typewriter · Fade in · Text rise · Text zoom · Text slide
Text entrance duration (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Text effects
: .2 … 8
Animation while visibleSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Text effects
Choices available: No continuous animation · Left to right wave · Bouncing letters · Pulsing glow · Text pulse · Gentle floating · Swaying letters
Animation cycle (s)Number
Movement speed of animated elements.
Text effects
: .4 … 10
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Text effects
: .05 … 1 · .05
Custom text colorSwitch
The main color of the indicated part. The effect depends on the section in which the field appears.
Text effects
Text colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Text effects
Second colorColor
The second color to finish the gradient.
Text effects
GradientSwitch
Enables a transition between two colors in this part of the element.
Text effects
Text shadowSwitch
Turns on the shadow of this part of the element.
Text effects
Shadow colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Text effects
Shadow opacityZipper
Shadow coverage. Changes the visibility of the shadow without intentionally changing the opacity of the text or background.
Text effects
: 0 … 1 · .05
Shadow blur / strengthNumber
Blur the edges of the shadow.
Text effects
: 0 … 60
Horizontal shadow (px)Number
Horizontal shift of the shadow relative to the element.
Text effects
: -40 … 40
Vertical shadow (px)Number
The vertical shift of the shadow relative to the element.
Text effects
: -40 … 40
Text outlineSwitch
Turns on the text outline.
Text effects
Border colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Text effects
Text outline width (px)Number
Letter stroke thickness.
Text effects
: .2 … 4
Repeat show and hide cycleSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Text styling and animation
Show for (s)Number
Determines whether the specified item is visible in this configuration. Enabling does not create missing platform data.
Text styling and animation
: 1 … 3600
Hide for (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Text styling and animation
: 1 … 3600
Overlay positionSelection list
The base position of an element on the screen. The detailed position can be set in the available X and Y sliders.
Text styling and animation
Choices available: Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right
Stream width (px)Number
The width of the browser source area in pixels.
Text styling and animation
: 320 … 7680
Stream height (px)Number
The height of the browser source area in pixels.
Text styling and animation
: 240 … 4320
Horizontal margin (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Text styling and animation
: 0 … 2000
Vertical margin (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Text styling and animation
: 0 … 2000
Show this viewSwitch
Determines whether the specified item is visible in this configuration. Enabling does not create missing platform data.
Text styling and animation
Show timeSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Text styling and animation
Customize this elementSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Individual opacitySwitch
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: time
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: time
: .05 … 1 · .05
Animate this elementSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Entrance animationSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: time
Choices available: Floating · Pulsing · Rotation · Bouncing
Animation cycle (s)Number
Movement speed of animated elements.
Element: time
: .4 … 10 · .1
Override text stylingSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Enable text effectsSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Text entrance animationSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: time
Choices available: None · Typewriter · Fade in · Text rise · Text zoom · Text slide
Text entrance duration (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: time
: .2 … 8
Animation while visibleSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: time
Choices available: No continuous animation · Left to right wave · Bouncing letters · Pulsing glow · Text pulse · Gentle floating · Swaying letters
Animation cycle (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: time
: .4 … 10
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: time
: .05 … 1 · .05
Custom text colorSwitch
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: time
Text colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: time
Second colorColor
The second color to finish the gradient.
Element: time
GradientSwitch
Enables a transition between two colors in this part of the element.
Element: time
Text shadowSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Shadow colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: time
Shadow opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: time
: 0 … 1 · .05
Shadow blur / strengthNumber
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: time
: 0 … 60
Horizontal shadow (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: time
: -40 … 40
Vertical shadow (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: time
: -40 … 40
Text outlineSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: time
Border colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: time
Text outline width (px)Number
The width of the source or element indicated by this section.
Element: time
: .2 … 4
Show text / titleSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Text styling and animation
Customize this elementSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Individual opacitySwitch
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: title
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: title
: .05 … 1 · .05
Animate this elementSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Entrance animationSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: title
Choices available: Floating · Pulsing · Rotation · Bouncing
Animation cycle (s)Number
Movement speed of animated elements.
Element: title
: .4 … 10 · .1
Override text stylingSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Enable text effectsSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Text entrance animationSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: title
Choices available: None · Typewriter · Fade in · Text rise · Text zoom · Text slide
Text entrance duration (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: title
: .2 … 8
Animation while visibleSelection list
Select a variant from the available list. The meaning of the selection is evident from the label and settings section; the change requires saving the configuration.
Element: title
Choices available: No continuous animation · Left to right wave · Bouncing letters · Pulsing glow · Text pulse · Gentle floating · Swaying letters
Animation cycle (s)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: title
: .4 … 10
Overlay opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: title
: .05 … 1 · .05
Custom text colorSwitch
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: title
Text colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: title
Second colorColor
The second color to finish the gradient.
Element: title
GradientSwitch
Enables a transition between two colors in this part of the element.
Element: title
Text shadowSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Shadow colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: title
Shadow opacityZipper
Opacity of the entire element, including text and graphics. It is independent of the opacity of the background itself.
Element: title
: 0 … 1 · .05
Shadow blur / strengthNumber
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: title
: 0 … 60
Horizontal shadow (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: title
: -40 … 40
Vertical shadow (px)Number
Set a numeric value for this option. The range below shows the limitations of the form; some features have additional plan limits.
Element: title
: -40 … 40
Text outlineSwitch
Enables or disables the option indicated in the label. Dependent options may only appear after you enable it.
Element: title
Border colorColor
The main color of the indicated part. The effect depends on the section in which the field appears.
Element: title
Text outline width (px)Number
The width of the source or element indicated by this section.
Element: title
: .2 … 4
When something doesn't work
Preview changes did not reach OBS
Check if they have been saved. The draft preview is used to try on settings; the saved version test uses the persisted configuration.
Text disappears when transparency is changed
The opacity of the entire overlay also affects the text and image. If you only want a transparent background, change the opacity of the background itself.