News graphics don’t have to come from expensive template packs. A scrolling ticker, a sliding lower third or a blinking LIVE badge can be built with a few lines of HTML and CSS, and they run in any browser and in OBS.
Our HTML & CSS News Animations page gives you six of them, free, with a live preview and a copy button.
What’s included
- Breaking News Ticker – an endless scrolling strip with a red BREAKING label.
- Name Lower Third – a slide-in name and title for interviews and analysts.
- Urdu Breaking News Strip – right-to-left, in Nastaliq, sliding up from the bottom.
- LIVE Badge – the familiar blinking red badge for the corner of the screen.
- Headline Text Reveal – a bold two-line headline that rises out of a mask.
- Map Location Ping – a radar-style pulse to mark a city on a map.
Every animation is built for a 1920×1080 frame and uses pure CSS, with no JavaScript and no libraries.
Three ways to use them
1. In OBS or Streamlabs (live streams)
- Click ↓ .html under the animation you want.
- In OBS, add a Browser Source, tick Local file and select the downloaded file.
- Set width 1920 and height 1080. The background stays transparent, so the graphic sits on top of your camera or screen capture.
2. In video editors (Premiere Pro, CapCut, After Effects)
- Switch the preview background to Green screen and download the .html file.
- Open it in Chrome, press F11 for full screen and record it with OBS or any screen recorder.
- Drop the recording into your editor and remove the green with Ultra Key, Chroma Key or Keylight.
3. On a website
Click Copy code, paste it into your page and change the text. The class names all start with mm-, so they won’t clash with your site’s styles.
Customising the text and colours
Open View code and look for the words between the tags, such as Headline one goes here. Replace them with your own. Colours are written as hex codes like #c8102e (red) and #40d9ff (cyan). Swap them for your channel colours and you have a branded graphics package.
Pairing with other free tools
Need a static version for a thumbnail? Make one with the Breaking News Lower Third Maker. Marking a city on a map? Combine the Map Location Ping with a map PNG or a GeoJSON map in After Effects.