Jieyou Toolbox
Home / Tools / OBS Stream Widgets
STREAM OVERLAY GENERATOR

Free OBS Stream Widgets & Overlays

Select widget type and style to generate OBS Browser Source overlays with transparent backgrounds. 100% local processing, no data uploaded.

🔒 100% Client-side · Transparent background · Browser source ready · Zero dependencies
🔔
Sub Alert
New subscriber popup
🎁
Donation
Gift & tip popup
⏱️
Countdown
Timer overlay
💬
Chat
Comment overlay
🎵
Now Playing
Music info widget
Live Preview (1920 x 1080) 

            

              
              
            

          

        

      

    

  







  

    
🔗 Related Tools

    

      
        
Live Soundboard

        
Play sound effects for streaming

      
      
        
Teleprompter

        
Scrolling script for streamers

      
      
        
Silence Remover

        
Remove silent audio sections

      
      
        
Video Trimmer

        
Trim video clips online

      
    

  







  

    
📖 How to Use OBS Stream Widgets

    

      

        
🔧 Step 1: Choose a Template

        
    
          
  1. Select one of the 5 widget templates above
    2. 
          
  2. Each template is designed for a specific streaming use case
    3. 
          
  3. Click on any template card to switch between them
    4. 
        

      

      

        
🎨 Step 2: Customize Appearance

        
    
          
  1. Edit text content, colors, fonts in the left panel
    2. 
          
  2. Pick animation styles for entrance and exit
    3. 
          
  3. Adjust timing, sizes, and toggle features on/off
    4. 
        

      

      

        
👁️ Step 3: Preview in Real-time

        
    
          
  1. See your changes instantly in the preview area
    2. 
          
  2. Dark grid background simulates transparent overlay
    3. 
          
  3. Animations play automatically for popup widgets
    4. 
        

      

      

        
📥 Step 4: Add to OBS

        
    
          
  1. Copy the generated code or download the HTML file
    2. 
          
  2. In OBS, add a Browser Source
    3. 
          
  3. Check "Local file" and select your HTML file
    4. 
          
  4. Set width to 1920 and height to 1080
    5. 
          
  5. The background is already transparent - no chroma key needed
    6. 
        

        

          Pro tip: For best results, set the Browser Source width/height to match your stream canvas resolution. The widget positions itself absolutely within that area.
        

      

    

  







  

    
Frequently Asked Questions

    

      

        
Is this OBS widget generator really free?

        
Yes, completely free and 100% client-side. Your widget configurations and generated code never leave your browser. No account, no subscription, no hidden fees.

      

      

        
Do I need to download anything?

        
No software download is required to design widgets. Once customized, you can copy the HTML code directly or download a single .html file to use as an OBS Browser Source.

      

      

        
Will these widgets work with Streamlabs or other streaming software?

        
Yes! These are standard HTML/CSS widgets with transparent backgrounds. They work with any software that supports browser sources, including Streamlabs Desktop, XSplit, vMix, and more.

      

      

        
How do I make the background transparent?

        
The generated widgets already use background: transparent or rgba(0,0,0,0). In OBS Browser Source settings, simply leave the Custom CSS field empty or ensure no background color is set.

      

      

        
Can I edit the widget after downloading?

        
Absolutely. The downloaded file is plain HTML/CSS/JavaScript. You can open it in any text editor to make further customizations, or come back to this generator and re-export.

      

      

        
Do the widgets work on Mac and Linux?

        
Yes. Since these are pure HTML files, they are platform-independent. OBS Browser Source works the same way on Windows, macOS, and Linux.