How do I add the card in OBS?

Copy the generated link. In OBS: Add Source → Browser → paste the URL. Set the browser source width and height to match your card size (e.g. 400×200). The page has a transparent background so only the card content is visible.

Can I use a solid background instead of transparent?

Yes. In the Custom card tab choose Background → Solid color and pick a color. The link will include that background.

Free tool by DCAST

OBS Overlay Cards

Create transparent overlay cards for OBS Browser Source: current time, date, static text, or custom size and style.

Pick a template

Size

Background

Text align

Font

Time format

Time precision

Font size

Text color

OBS Browser Source link

In OBS: Add Source → Browser → paste this URL. Set width and height to match the card size (640×360).

Default text color is dark for visibility on a light preview; in OBS use white or any color for your overlay. Transparent background shows your scene behind the card.

Stream countdown — countdown to stream start. All tools

How to use OBS overlay cards

Use templates (current time, date, or static text) or the custom editor to set size, background, text, font size, and color. The tool gives you a link to a minimal page that renders the card. Use it as an OBS Browser Source; the page background is transparent by default so it overlays your scene.

Q:How do I add the card in OBS?: A:Copy the generated link. In OBS: Add Source → Browser → paste the URL. Set the browser source width and height to match your card size (e.g. 400×200). The page has a transparent background so only the card content is visible.
Q:Can I use a solid background instead of transparent?: A:Yes. In the Custom card tab choose Background → Solid color and pick a color. The link will include that background.