CSS Text Stroke Generator | Text Outline Border Style

How to use the -webkit-text-stroke property in CSS

To use the -webkit-text-stroke property in CSS, you can follow these steps:

Syntax

Stroke Width and Color Separately:

element {
	-webkit-text-stroke-width: <width>
	-webkit-text-stroke-color: <color>
}

• width: Specifies the width of the stroke. This can be given in any valid CSS unit such as px, em, etc.

• color: Specifies the color of the stroke (border / outline). This can be any valid CSS color value (name, hex, rgba, rgb, etc.).

You can also use shorthand to combine these two properties. -webkit-text-stroke

Shorthand Property:

element {
	-webkit-text-stroke: 2px #65ff9f;
}

Browser Support

text-stroke property is primarily supported by WebKit-based browsers, such as Google Chrome, Safari, and the latest versions of other modern browsers, including Firefox and Microsoft Edge.

Example CSS text Stroke HTML and CSS

Here's an example that applies a 1.5 pixel stroke width and green text fill color to the H1 element.

<h1 class="text-stoke">CSS text stroke</h1>

.text-stoke {
	font-size: 75px;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #000000;
	color: #65ff9f;
	font-family: Impact, Charcoal, sans-serif;
}

How To Add Gradient or Mask With An Image To Text Stroke (Border)

To add a gradient or image to a text stroke (Outline), first set the stroke color to transparent. Then, apply two CSS properties: background-clip: text; and background: linear-gradient(0deg, #00e7ff, #ff00d4);.

Example Gradient Stoke

Here's how you can structure your CSS

<h1 class="gradient-text-stoke">Gradient Stroke</h1>

.gradient-text-stoke {
	font-size: 75px;
	-webkit-text-stroke-width: 4px;
	-webkit-text-stroke-color: transparent;
	color: #ffffff;
	font-family: cursive;
	/* gradient */
	background: linear-gradient(0deg, #00e7ff, #ff00d4);
	/* background image */
	/* background-image: url(/images/mask-image.jpg);*/
	-webkit-background-clip: text;
	background-clip: text;
	display: inline-block;
}

Preview gradient stoke

Preview stoke mask with an image

How Can I Add Text Stroke Background With An Image Or Gradient

To fill a gradient or image to a text stroke Background, first set the text color to transparent and -webkit-text-fill-color to transparent. Then, add two CSS properties: background-clip: text; and background: linear-gradient(0deg, #00e7ff, #ff00d4);.

Example Stroke background fill gradient and image

Here's how you can structure your CSS

<h1 class="text-stoke-fill-gradient">Stroke Fill Gradient</h1>

.text-stoke-fill-gradient {
	font-size: 75px;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #000;
	color: transparent;
	font-family: 'Arial Black', Gadget, sans-serif;
	/* gradient */
	background: linear-gradient(45deg, #9c27b0, #f44336, #ff9800, #ffc107, #8bc34a, #4caf50, #2196f3, #03a9f4, #00bcd4, #009688);
	/* background image */
	/* background-image: url(/images/mask-image.jpg);*/
	-webkit-background-clip: text;
	background-clip: text;
	display: inline-block;
}

Preview stoke text fill gradient

Preview stoke text fill image

Generate Online CSS Text Stroke

Beautify your text easily with this awesome tool to create CSS text stroke effects! This will give your words a trendy outline that will make them pop. Enhance your text designs with Google Fonts.

Customize the text styling with various properties like font weight, style, and size for stroke width. Finally, add a background gradient or image behind the text.