Background / Outline Style Generator

The Background / Outline Style Generator produces the contrast settings that keep captions readable over moving pictures. Set an Outline width, a Shadow depth and a Back colour (hex) value, and the tool returns a short labelled snippet giving the ASS background colour in its correct byte order alongside your two numbers, copyable from the panel or saveable as a .txt file.

White text over a white shirt disappears, and so does yellow over a sandy beach. Outline and shadow exist to solve that, and a background colour behind the text handles the hardest cases outright, but the values live in a long positional style record that is uncomfortable to edit. Accessibility teams working to legibility guidance, e-learning producers and documentary editors need them correct before a render, not after.

The generator does the fiddly part. Your outline and shadow numbers are read and defaulted sensibly if left blank, and the background colour is where the real work happens: a leading # is stripped, the six digits are split into red, green and blue pairs, and those pairs are reassembled in the reversed blue-green-red order ASS requires, wrapped as &H and a closing ampersand. That inversion is the commonest cause of a background box rendering in an unexpected colour. Note the tool takes no subtitle file at all, so you can settle a readable look once and reuse it across a series.

• Outline width control: The Outline field sets the thickness of the border drawn around each glyph, which is the primary defence against captions vanishing into a bright or busy background.
• Separate shadow depth: The Shadow field is independent of the outline, so you can add a soft offset for depth without thickening the letterforms themselves.
• Correct ASS colour order: The Back colour (hex) value is converted from ordinary red-green-blue hex into the reversed blue-green-red form ASS expects, removing the most frequent styling mistake in subtitle work.
• Forgiving colour input: A leading hash is stripped automatically, so you can paste a value straight from a design tool or a brand guideline without editing it first.
• Labelled output: Each generated value is named in the snippet, so it is obvious which number belongs to the outline field and which to the shadow field of your style.
• Sensible defaults: Leaving fields empty produces a workable baseline rather than an error, giving you a valid reference snippet to start from.
• No subtitle required: Because the tool takes settings rather than a file, you can design a legible look before the subtitle even exists and reuse it across every episode.
• Saveable and private: The snippet downloads as a .txt file for your style notes, and the whole calculation runs in your browser with nothing uploaded.

1. Decide how difficult your footage is: bright, high-contrast or fast-moving material needs a heavier treatment than a controlled interview shot.
2. Enter a value in the Outline field, starting around 2 for most 1080p work and going higher if captions still struggle over the busiest shots.
3. Set the Shadow field, using 0 for a flat clean look or a small value such as 1 or 2 to lift the text off the picture with a soft offset.
4. Type the background colour into Back colour (hex), for example 000000 for a solid black box; a leading hash is accepted and removed for you.
5. Press Run and read the generated snippet, which names the ASS background colour in its converted form together with your outline and shadow values.
6. Click Copy to take the snippet, or Download to save it as a .txt file you can keep with the project's style notes.
7. Paste the values into the matching fields of your ASS style definition, then render a test clip over the hardest shot in the programme to confirm the captions stay readable.

Example 1 - captions over a bright snow sequence. White text with no outline vanishes against snow, so set Outline to 2, Shadow to 1 and the back colour to 000000.

ASS style snippet:
BackColour: &H000000&
Outline: 2
Shadow: 1

Black is symmetrical so the byte reversal is invisible here, but the outline and shadow are what rescue the caption.

Example 2 - a coloured background box. A client wants deep navy, given as 001F3F.

Input: Outline 1, Shadow 0, Back colour 001F3F

BackColour: &H3F1F00&
Outline: 1
Shadow: 0

The red and blue pairs have swapped; pasting 001F3F unchanged would have produced a different colour entirely.

• Captions that stay readable everywhere: Getting outline, shadow and background right means viewers can read the text over snow, sky, white walls and fast cuts without straining.
• Meets accessibility expectations: Legibility is a core part of caption quality guidance, and deliberate contrast settings are far easier to defend in review than default styling.
• No colour surprises after a render: The automatic byte-order conversion stops the classic case of a background box coming out the wrong colour only once the encode has finished.
• Reusable across a series: One saved snippet gives every episode the same treatment, so a season looks consistent instead of being restyled by whoever handled each file.
• Fewer wasted encodes: Choosing values deliberately up front avoids the slow loop of rendering a clip, squinting at it and adjusting the style again.
• Nothing leaves your browser: The generator runs entirely on your machine, so brand colours and unreleased project details stay private.