Architect's Guide

Oct 29, 2025 · Frontend Development

How to Create Non‑Obstructive Bilibili‑Style Subtitles with a Simple CSS Mask

This article explains how a single image and the CSS -webkit-mask-image property can be used to prevent subtitles from covering on‑screen characters, replicating Bilibili's non‑obstructive bullet subtitles with a lightweight, experimental technique demonstrated through a complete HTML demo.