PostHole
Compose
Login
Smashing Animations Part 7: Recreating Toon Text With CSS And SVG
In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.
- Andy Clarke
- Dec 17, 2025
- 0 comments
Smashing Animations Part 7: Recreating Toon Text With CSS And SVG
- 11 min read
- SVG,
CSS,
Design
About The Author
Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative …
More about
Andy ↬
*Weekly tips on front-end & UX.
Trusted by 182,000+ folks.*
In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.
After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and “How Classic Cartoons Inspire Modern CSS.” To round off this year, I want to show you how to use modern CSS to create that element that makes Toon Titles so impactful: their typography.
Title Artwork Design
In the silent era of the 1920s and early ’30s, the typography of a film’s title card created a mood, set the scene, and reminded an audience of the type of film they’d paid to see.
[Typographic title cards from the early years of cinema]
Typographic title cards from the early years of cinema. (Large preview)
Cartoon title cards were also branding, mood, and scene-setting, all rolled into one. In the early years, when major studio budgets were bigger, these title cards were often illustrative and painterly.
[Top: William Hanna and Joseph Barbera’s 1940s Tom & Jerry title cards. Bottom: Colour versions released in 1957. © Warner Bros. Entertainment Inc.]
Top: William Hanna and Joseph Barbera’s 1940s Tom & Jerry title cards. Bottom: Colour versions released in 1957. © Warner Bros. Entertainment Inc. (Large preview)
But when television boomed during the 1950s, budgets dropped, and cards designed by artists like Lawrence “Art” Goble adopted a new visual language, becoming more graphic, stylised, and less intricate.
Note: Lawrence “Art” Goble is one of the often overlooked heroes of mid-century American animation. He primarily worked for Hanna-Barbera during its most influential years of the 1950s and 1960s.
Goble wasn’t a character animator. His role was to create atmosphere, so he designed environments for The Flintstones, Huckleberry Hound, Quick Draw McGraw, and Yogi Bear, as well as the opening title cards that set the tone. His title cards, featuring paintings with a logo overlaid, helped define the iconic look of Hanna-Barbera.
Goble’s artwork for characters such as Quick Draw McGraw and Yogi Bear was effective on smaller TV screens. Rather than reproducing a still from the cartoon, he focused on presenting a single, strong idea — often in silhouette — that captured its essence. In “The Buzzin’ Bear,” Yogi buzzes by in a helicopter. He bounces away, pic-a-nic basket in hand, in “Bear on a Picnic,” and for his “Prize Fight Fright,” Yogi boxes the title text.
[Title cards for Hanna-Barbera’s Yogi Bear.]
Title cards for Hanna-Barbera’s Yogi Bear. © Warner Bros. Entertainment Inc. (Large preview)
With little or no motion to rely on, Goble’s single frames had to create a mood, set the scene, and describe a story. They did this using flat colours, graphic shapes, and typography that was frequently integrated into the artwork.
[Title cards for Hanna-Barbera’s Quick Draw McGraw.]
Title cards for Hanna-Barbera’s Quick Draw McGraw. © Warner Bros. Entertainment Inc. (Large preview)
As designers who work on the web, toon titles can teach us plenty about how to convey a brand’s personality, make a first impression, and set expectations for someone’s experience using a product or website. We can learn from the artists’ techniques to create effective banners, landing-page headers, and even good ol’ fashioned splash screens.
Toon Title Typography
Cartoon title cards show how merging type with imagery delivers the punch a header or hero needs. With a handful of text-shadow, text-stroke, and transform tricks, modern CSS lets you tap into that same energy.
[Title cards for Hanna-Barbera’s Augie Doggie.]
Title cards for Hanna-Barbera’s Augie Doggie. © Warner Bros. Entertainment Inc. (Large preview)
The Toon Text Title Generator
Partway through writing this article, I realised it would be useful to have a tool for generating text styled like the cartoon titles I love so much. So I made one.
My Toon Text Title Generator lets you experiment with colours, strokes, and multiple text shadows. You can adjust paint order, apply letter spacing, preview your text in a selection of sample fonts, and then copy the generated CSS straight to your clipboard to use in a project.
Toon Title CSS
You can simply copy-paste the CSS that the Toon Text Title Generator provides you. But let’s look closer at what it does.
Text shadow
Look at the type in this title from Augie Doggie’s episode “Yuk-Yuk Duck,” with its pale yellow letters and dark, hard, offset shadow that lifts it off the background and creates the illusion of depth.
[Example from Andy's Toon Text collection.]
See this example in my Toon Text collection. (Large preview)
You probably already know that text-shadow accepts four values: (1) horizontal and (2) vertical offsets, (3) blur, and (4) a colour which can be solid or semi-transparent. Those offset values can be positive or negative, so I can replicate “Yuk-Yuk Duck” using a hard shadow pulled down and to the right:
color: #f7f76d;
text-shadow: 5px 5px 0 #1e1904;
[Example from Andy's Toon Text collection.]
See this example in my Toon Text collection. (Large preview)
On the other hand, this “Pint Giant” title has a different feel with its negative semi-soft shadow:
color: #c2a872;
text-shadow:
-7px 5px 0 #b100e,
0 -5px 10px #546c6f;
[Example from Andy's Toon Text collection.]
See this example in my Toon Text collection. (Large preview)
To add extra depth and create more interesting effects, I can layer multiple shadows. For “Let’s Duck Out,” I combine four shadows: the first a solid shadow with a negative horizontal offset to lift the text off the background, followed by progressively softer shadows to create a blur around it:
color: #6F4D80;
text-shadow:
-5px 5px 0 #260e1e, /* Shadow 1 */
0 0 15px #e9ce96, /* Shadow 2 */
0 0 30px #e9ce96, /* Shadow 3 */
0 0 30px #e9ce96; /* Shadow 4 */
These shadows show that using text-shadow isn’t just about creating lighting effects, as they can also be decorative and add personality.
Text Stroke
Many cartoon title cards feature letters with a bold outline that makes them stand out from the background. I can recreate this effect using text-stroke. For a long time, this property was only available via a -webkit- prefix, but that also means it’s now supported across modern browsers.
[Example from Andy's Toon Text collection.]
See this example in my Toon Text collection. (Large preview)
text-stroke is a shorthand for two properties. The first, text-stroke-width, draws a contour around individual letters, while the second, text-stroke-color, controls its colour. For “Whatever Goes Pup,” I added a 4px blue stroke to the yellow text:
[...]