Turn a heading into bold outlined type. Mix fill, stroke, a second outline and an offset shadow live, then copy the exact HTML and CSS.
Build anything from a crisp hollow headline to a layered poster treatment without guessing at stroke values.
Combine a precise inner stroke with a wider second color for dimensional, logo-like lettering.
Adjust type, color, thickness, spacing and shadow depth while watching every edge update.
Export accessible HTML and compact CSS, including the pseudo-element used for layered strokes.
Type a short heading, select a font, then choose colors for the fill and stroke. The Inner stroke slider controls the crisp line around each letter. Turn off Text fill when you want hollow outlined text, or enable Second outline to place a wider color layer behind the first.
Once the preview looks right, choose Copy code. The generated snippet uses -webkit-text-stroke for the main outline. If you enable a second outline, it also uses a matching ::before pseudo-element and the element's data-text attribute.
Outline effects stay clearest on bold headings, logos and badges. Keep paragraph text solid for comfortable reading, and check contrast against the final background.
Outlined lettering is a strong choice for hero headlines, event posters, sports graphics, thumbnails, game titles, sticker-style labels and playful callouts. The offset shadow can create a punchy comic-book look, while a thin single stroke feels cleaner and more editorial. This free text stroke effect generator online helps you test both directions before adding the CSS to your site.
Current Chrome, Edge, Safari and Firefox versions support -webkit-text-stroke. For an important heading, keep a readable fill color so the text still works if the outline is unavailable. The generated effect is pure HTML and CSS; JavaScript is only used by this page's live controls.
Use -webkit-text-stroke with a width and color, such as -webkit-text-stroke: 2px #17182a. Choose a separate color value for the fill.
Yes. Repeat the text with a ::before pseudo-element, place it behind the original, and give it a wider stroke in the second color. This generator writes that code for you.
Yes. Turn off Text fill to use transparent letter interiors while keeping the stroke visible. Place the result over a background with enough contrast.
No. The exported text outline effect uses only HTML and CSS. JavaScript powers the editor controls, not the effect you copy.
Yes. It is free, requires no account and creates the code locally in your browser.
Keep shaping your typography with these free online CSS generators.