Style Your Subtitles Like YouTube, Netflix & Crunchyroll Using FFmpeg

Learn how to recreate the iconic subtitle styles from your favorite streaming platforms — all using FFmpeg.
by Bannerbear Youtube ·

Learn how to recreate the iconic subtitle styles from your favorite streaming platforms — all using FFmpeg.

In this tutorial, we cover:

• ▶ YouTube's semi-transparent black box style

• 🎬 Netflix's clean drop shadow look

• 🍥 Crunchyroll's anime font

• 📼 Vintage yellow italic for a retro vibe

• 🎨 3 custom base layouts to match your own brand

Whether you're working with SRT or ASS subtitle files, you'll learn how to apply styles directly in the file or pass them via the force_styleoption in your FFmpeg command.

💡 Pro tip: ASS files use BGR color format (not RGB) — that's the

reason custom colors don't show up as expected!

If you found this helpful, hit Like and Subscribe for more FFmpeg tutorials!

Video Transcription

[00:00:00] Have you ever noticed that subtitles look different depending on which streaming platform you're on? And sometimes you could cover the rest of the screen and still tell which one it is. There's something about the font and the style that just feels like YouTube or Netflix or screams anime. It's almost like the subtitle style is part of their branding.

Today, we're going to learn how to add subtitles and styles like YouTube, Netflix, Crunchyroll, and more using FFmpeg. We've covered the basics of adding subtitles with FFmpeg in a previous tutorial, so if you haven't watched that yet, I'd strongly recommend starting there first. The link is in the description.

Otherwise, let's get into it. Before we jump into the fancy styles, let's quickly cover what FFmpeg gives you by default and how you can change that style. When you add

[00:01:00] a subtitle to a video using FFmpeg, it applies a default style automatically. If your subtitle is in the SRT format, you can first convert it to an ASS file, which is a more feature-rich subtitle format using this command.

Open that ASS file, and you'll see a list of style definitions, like font name, font size, color, and so on. By default, FFmpeg uses Arial as the font, white text, and a black outline. If you're wondering why the color code looks strange, this is because colors in ASS files uses a hexadecimal BGR color format instead of the standard web RGB format, and uses the prefix &h instead of hash.

Now, to change the style, you have two options. Option one is to edit the style

[00:02:00] definitions directly inside the ASS subtitle file. Option two is to pass the styles right in the FFmpeg command using the force_style option, like this. All right, let's start with the most recognizable one: YouTube's closed caption style, with white text on a semi-transparent black box.

It's clean, readable on any background, and universally liked. Here's how to do it. The YouTube style uses the sans-serif font with white text and a black background box at 75% opacity, so it's slightly see-through. If you prefer to set this directly in your ASS subtitle file, find the format and style lines and update them to these values.

If you'd rather keep everything in one command without touching the subtitle file, use the force_style option that's in your

[00:03:00] command and specify the styles. The key here is border style equal three. FFmpeg only accepts two possible values: one or three for this property. One adds an outline and a drop shadow to the text, while three adds an opaque box that becomes the background of the subtitle text.

Netflix offers four subtitle presets, not just one. The default is plain white text with a drop shadow, which you can also switch to white text on a black background, black text on a white background, or a high-contrast option with yellow text on black. For this tutorial, we're going to replicate the default style, white text with a soft drop shadow, since that's what most viewers see out the box.

Netflix uses a proprietary font called Netflix Sans. It isn't publicly available, so we'll use the closest freely available

[00:04:00] alternative, Inter. It has a similar clean, geometric feel. To set this in your ASS subtitle file, update the format and style lines like so. Or pass everything through the command line with force_style.

When outline is set to zero, FFmpeg drops the outline entirely and switches to a drop shadow instead. Backcolor becomes the shadow color, and the shadow property controls the depth of the shadow. If you want to go to one of Netflix's other presets, you can add border style equal three back in for the black background box variant, or change primary color to yellow for the contrast look.

And now, the one anime fans will immediately recognize, the Crunchyroll style. This is probably the simplest change that we'll make

[00:05:00] today, but the effect is instantly recognizable. The entire change here is just the font. Everything else stays at default. In your ASS subtitle file, change the format and style lines to this Or as an FFmpeg command like this One quick tip, if the font doesn't show up in your output video, download the TTF font file and place it in the same directory where you're running the command.

FFmpeg will pick up from there. Now, for something a bit different, the vintage yellow italic style. This one's more of an aesthetic choice, and it's been around since the early days of DVDs. It's nostalgic, eye-catching, and works well for short-form content, travel videos, or anything with a retro vibe.

Here's how to set it in your ASS subtitle

[00:06:00] file or as a one-liner FFmpeg command Primary color sets the font color. In the ASS BGR format, this color code gives us a bright yellow. Setting italic equal one applies the italic style, which is what gives it that classic vintage feel. The spacing equals zero eight is also important here.

Yellow text can look really packed and overwhelming without a bit of spacing between letters, so bumping it to zero point eight makes it much more readable and pleasing to the eye. The four styles we've covered are great starting points, but they're not unique to your brand. If you're making branded content, matching your subtitle style to your own brand is a small touch that makes a big difference.

I'll show you three base layouts which you can tweak with your own fonts and colors, and since you've already

[00:07:00] seen how to translate ASS settings into an FFmpeg command throughout this video, I'll just show you the style definitions. Try building the command yourself using what you've learned. The first style is text with an outline.

This style is good for readability without covering much of the frame. In your ASS file, use the settings below and replace the placeholder values with your preferred font, colors, and border width. Border style equal one is what tells FFmpeg to draw a border rather than a box or shadow, so don't change that.

The second style is text with a solid background box. This puts a colored box behind the text, the same format as the YouTube style we covered earlier. But now you can use any font style and color to match your brand. Simply change the font and colors

[00:08:00] in the settings. Border style equal three is what tells FFmpeg to draw a filled box, so keep it the same.

The last one is the most fancy layout. You get a border around the text and a separate shadow underneath with independent control over both colors and depth. Here's the settings for it. Go ahead and try turning these into an FFmpeg command. You have everything you need from what we've covered today.

That's all. You've now got yourself YouTube's semi-transparent black box, Netflix's drop shadow, Crunchyroll's anime font, the vintage yellow italic, and three base layouts to build a fully custom style with your own fonts and colors. One thing to keep in mind is to convert colors from the standard RGB format to BGR.

The hex values are in reverse order, and that's the most

[00:09:00] common reason a custom color doesn't show up the way you expect. If this was helpful, hit Like and Subscribe so you don't miss out on future videos. I'll see you in the next one.

https://youtu.be/-GtzDWWZolY?si=Kxoj41slEJfXR13F

About the authorBannerbear Youtube@bannerbear
Quick Youtube video tutorials from the Bannerbear team on automating image and video generation.

How to Add AI-Generated Backgrounds to Your Bannerbear v5 Templates (Node.js Tutorial)

Learn how to add AI-generated backgrounds to your Bannerbear v5 templates. This step-by-step tutorial shows you how to enable AI Background Generation in the template editor and generate on-brand product images automatically using the Bannerbear API.

Video

How to Auto-Generate Custom Pinterest Images for Your Website Using Bannerbear

Already generating Open Graph images automatically?

Video

How to Add Subtitles to a Video with FFmpeg

83% of people watch videos with the sound off.

Automate & Scale
Your Marketing

Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

Style Your Subtitles Like YouTube, Netflix & Crunchyroll Using FFmpeg
Style Your Subtitles Like YouTube, Netflix & Crunchyroll Using FFmpeg