# Lower third: Name Tag

A blue-to-cyan gradient tag slides in at the bottom left with a bold name and a role below. Use this video template in Subclip or copy its code for Claude.

Canonical URL: https://www.subclip.app/motion-graphics-templates/html-css/lower-third

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-html-lower-third.mp4?v=6cc6af4c09

A gradient lower third in the bottom left corner with a bold uppercase name and a smaller role line, built with CSS keyframes.

- Framework: HTML & CSS
- Category: Lower thirds & CTAs
- Duration: 3 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/html-css/lower-third

The lower third appears in the bottom left corner of the frame. A rounded card with a blue-to-cyan gradient animates in, then the name shows in bold white capitals with a smaller role line beneath it, YOUR NAME and Your role in the default version. The rest of the frame stays empty, so the tag sits over your footage without covering the subject. The animation is three seconds long and runs on plain CSS keyframes.

The template has no editor controls, so you change the name, role and gradient colors in the HTML and CSS. The code is short and readable, which makes it easy to edit by hand or with an AI coding agent. Use it to introduce speakers in interviews, podcasts, webinars, vlogs and corporate videos, or to label a guest the first time they appear.

## Use it for

- Speaker names in interviews
- Podcast and webinar guests
- Introducing yourself in vlogs
- Corporate and event videos

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Lower third and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.