What is CSS Text Stroke?

CSS text stroke is a styling technique that adds an outline around text characters. The effect is created using the -webkit-text-stroke property, which defines the thickness and color of the outline applied around each letter.

The property was originally introduced as a WebKit extension but is now supported in most modern browsers including Chrome, Edge, Safari, and many Chromium-based browsers.

Text stroke is particularly useful when designers want to increase contrast between text and complex backgrounds such as gradients, images, or videos.

CSS Text Stroke Syntax

The basic syntax for applying an outline to text in CSS is simple. You define the width of the stroke and the color that should appear around the text characters.

-webkit-text-stroke: <width> <color>;

Example:

h1 {
color: white;
-webkit-text-stroke: 2px black;
}

This code creates white text with a 2 pixel black outline.

CSS Text Stroke Properties

The shorthand property -webkit-text-stroke combines two individual properties:

• -webkit-text-stroke-width – controls the thickness of the text outline.
• -webkit-text-stroke-color – defines the color of the stroke.

Example using separate properties:

h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}

Using the shorthand version is generally easier when writing CSS manually.

Basic CSS Text Stroke Example

Here is a practical example showing how to apply an outline to a heading element.

h1 {
color: white;
-webkit-text-stroke: 2px black;
font-size: 48px;
font-weight: bold;
}

Result:

Outlined Text Example

If you want to experiment visually with stroke width, colors, and typography styles, try our interactive generator:

Generate CSS Text Stroke Code →

Real World Use Cases

CSS text stroke is frequently used in modern web design to create strong visual typography that remains readable on complex backgrounds.

• Hero section headlines
• Gaming interface typography
• Landing page titles
• Logo text effects
• Marketing banners
• Creative portfolio websites

Because the stroke effect is generated using pure CSS, it avoids the need for image-based text or heavy SVG filters.

CSS Text Stroke vs Text Shadow

Before the introduction of the text stroke property, developers often simulated text outlines using the text-shadow property.

Example:

text-shadow:
1px 1px 0 black,
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black;

This technique works but requires multiple shadow layers to create a consistent outline.

Using CSS text stroke is cleaner and easier to maintain.

Learn more about this method here:

Browser Support

The -webkit-text-stroke property works in most modern browsers including:

• Google Chrome
• Microsoft Edge
• Safari
• Opera

Firefox currently has limited support for the property. Developers who require broader compatibility often combine text stroke with fallback styles such as text-shadow.

Accessibility Considerations

When using text stroke, it is important to ensure that the text remains readable. Always maintain sufficient contrast between the fill color of the text and the stroke color.

Large strokes combined with transparent text can create stylish effects, but they should be tested across different screen sizes to ensure usability.

Performance Benefits

Using CSS text stroke is significantly more efficient than image-based typography or complex SVG filters.

Because the effect is rendered directly by the browser’s CSS engine, it does not increase page weight or add extra network requests. This helps maintain strong performance metrics such as Core Web Vitals and Largest Contentful Paint.

Create CSS Outline Text Instantly

Manually writing CSS can take time when experimenting with different stroke widths and colors.

Our free generator allows you to preview outline text in real time and instantly copy production-ready CSS code.

Try the CSS Text Stroke Generator →

Frequently Asked Questions

What is CSS text stroke?

CSS text stroke is a property that creates an outline around text using the -webkit-text-stroke CSS property.

How do you outline text in CSS?

You can outline text using the CSS text stroke property or by simulating outlines with multiple text-shadow layers.

Is CSS text stroke supported in all browsers?

Most modern browsers support it, but Firefox has limited support.

Related CSS Tools

• CSS Text Stroke Generator
• CSS Mesh Gradient Generator
• CSS Grid Layout Builder
• CSS Clip-Path Polygon Maker