I used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched. Because text-stroke accepts a single value, stacking elements was the only workaround I could think of, though it didn't seem to work.

One evening late last year, I was eager to give it another shot after seeing the text effect again in the book Graphic Japan : from woodblock and zen to manga and kawaii.

Text stroke effect from the book

I kept stacking several elements and accidentally varied the text-stroke-width for each layer. To my suprise, the result was getting closer this time.

--c: #cc0d55;
--n: @i(-1);

@grid: 36x1 / 240px;
@content: '✱';

position: absolute;
inset: 0;
font: 100px/0 sans-serif;
color: var(--c);
z-index: @I(-@i);

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));

How it works

For different values of the text-stroke-width, browsers will automatically draw outlines of the charater, The larger you set the stroke width, the thicker the outline will get, while still maintain its original shape.

@grid: 7x1/ 360px auto noclip; @content: '✱'; font: 50px/0 sans-serif; color: transparent; -webkit-text-stroke-color: #cc0d55; -webkit-text-stroke-width: @i(*1.8px);

The next step is to use different colors and put them in order.

@grid: 12x1/ 100px ß #f4e1e8; @content: '✱'; position: absolute; inset: 0; z-index: @I(-@i); font: 50px/0 sans-serif; color: transparent; -webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55); -webkit-text-stroke-width: @i(*3px);

The interesting part is how the browsers outlining the character shapes differently. FireFox offers more smoother rendering than in Chrome and Safari.

Another interesting part is when there are more text put inline, the character shapes will be merged.

/* ... */
@content: '秋收冬藏';

Trying different fonts

The final result really depends on the font you choose. To help experimenting with different fonts more quickly, I added the @google-font function for faster font loading.

--c: #cc0d55,#fff; @grid: 34x1 / 320px; @content: 'b'; font: 150px/0 @google-font(Matemasie); @place: center; z-index: @I(-@i); color: @pn(--c); -webkit-text-stroke-color: @pn(--c); -webkit-text-stroke-width: @i(-1, ease, *12px);

font-family: @google-font(Matemasie);
@content: 'b';

--c: #cc0d55,#fff; @grid: 30x1 / 320px; :after { content: 'Love'; position: absolute; } font: 80px/0 @google-font("Pacifico"); @place: center; z-index: @I(-@i); color: @pn(--c); -webkit-text-stroke-color: @pn(--c); -webkit-text-stroke-width: @i(ease, -1, *15px);

font-family: @google-font(Tangerine);
@content: 'Love';

--c: #fff9e0,#f1c550,#ff6600,#ce2525; --c: #cc0d55,#fff; @grid: 30x1 / 320px +2 ~0 -10%; :after { content: '+'; position: absolute; } @place: 50% 50%; font: 120px/0 @google-font("Cherry Bomb One"); z-index: @I(-@i); color: @pn(--c); -webkit-text-stroke-color: @pn(--c); -webkit-text-stroke-width: @i(ease, -1, *12px);

font-family: @google-font('Cherry Bomb One');
@content: '+';

Unfortunately, the performance is as bad as CSS filters, especially when the font-size is getting bigger, you may have noticed some flicking above. It's fine for experiments like this, or for generating images with css-doodle, but it's not well-suited for production usage.

More examples

Here are two more examples to play around with different colors and characters, generated with css-doodle, just for fun.

CodePen link for the first one: https://codepen.io/yuanchuan/pen/ogzarGo