Generators β€’ Online

Gradient Webcam Border

Create animated gradient borders for your webcam overlay. Perfect for OBS, streaming, and video calls.

Preview & Export

Preview your border and get the OBS link
CSS Code (for developers)

Adding to OBS

  1. Configure your border settings above
  2. Click "Generate Link" to create your OBS URL
  3. Copy the URL to clipboard
  4. In OBS, add a new "Browser" source
  5. Paste the URL and set width/height to match
  6. Position the border layer above your webcam

Tips

Make sure the browser source dimensions match your border size. The background is transparent, so it will overlay perfectly on your webcam feed. Use the Fullscreen button to preview at actual size.

Features

Use Random to get inspiration, Pause to take screenshots, and Copy CSS if you want to use the styles in your own projects. The glow effect adds extra pop for streaming!

Privacy

Everything runs locally in your browser. No data is sent anywhere. The generated URL contains all settings as parameters.

Shape & Dimensions

Configure the border frame

Gradient & Animation

Customize colors and speed