What is the outline effect of text in CSS
What is the CSS Text Outline Effect?
Sometimes, we need to display the outline of text and remove the text’s padding. We can also call this the text outline effect.
We can use various CSS properties to create an outline effect for text. For example, we can add a border to the text and remove the fill color to create an outline effect.
Here we use three different methods to display text with an outline effect using HTML and CSS.
Use various CSS Attributes
In this method, we will use three CSS properties to add an outline effect to the text. The first is “-webkit-text-fill-color” to change the fill color of the text to the same color as the background color. The second is “-webkit-text-stroke-width” to add the stroke width of the text, and the third CSS property is “-webkit-text-stroke-color” to add the outline color of the text.
Syntax
Users can follow the following syntax to add an outline effect to text using three different CSS properties.
-webkit-text-fill-color: color;
-webkit-text-stroke-width: size;
-webkit-text-stroke-color: color;
In the syntax above, we set the fill color, stroke width, and stroke color for the text.
Example 1
In the example below, we have a div element with the class name ‘text1’ that contains some text. We’ve set the text’s font size in CSS. Additionally, to add an outline effect to the text, we’ve set a fill color of white, a stroke width of 1px, and a stroke color of ‘blue’ to create a blue outline.
In the output, users can see the text outlined in blue.
<html>
<head>
<style>
.text1 {
font-size: 50px;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
}
</style>
</head>
<body>
<h2>Using different CSS properties to add an outline effect to text</h2>
<div class="text1">This text has a default </div>
</body>
</html>
Example 2
In the example below, we set a red background for a div element. Next, we use “red” as the fill color, making the fill the same as the background color. Here, the stroke width is “1.2px” and the stroke color is “yellow.”
In the output, users can observe that the text with a yellow outline is placed on a red background.
<html>
<head>
<style>
.text {
font-size: 50px;
width: 600px;
height: auto;
background-color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: yellow;
}
</style>
</head>
<body>
<h2>Using Different CSS Properties to Add an Outline Effect to Text</h2>
<div class="text">This text has a red background.</div>
</body>
</html>
Using the ‘text-shadow’ CSS Property
In this method, we will use the ‘text-shadow’ CSS The `text-shadow` property creates an outline effect for text. If we hide the text by setting the text color to the background color and displaying only the text shadow, we can create an outline effect.
Syntax
Users can use the `text-shadow` CSS property to add an outline effect to text by following the syntax below.
text-shadow: x-offset y-offset blur color;
The `text-shadow` property takes four different values to set the shadow. The first value is the x-offset, the second is the y-offset, the third is the blur value, and the fourth is the shadow color.
Example 3
In the example below, a div element contains text. In the CSS, we set the background color and font color to the same. Then, we use the `text-shadow` CSS property to add an outline effect. Here, we use four pairs of four values for ‘text-shadow’. The first pair is for the right shadow, the second for the bottom shadow, the third for the left shadow, and the last for the top shadow.
Effectively, it displays the text shadow instead of the text itself, creating an outline effect.
<html>
<head>
<style>
.text {
color: rgb(117, 117, 235);
font-size: 50px;
background-color: rgb(117, 117, 235);
text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
}
</style>
</head>
<body>
<h2>Using the 'text-shadow' CSS property to add an outline effect to text</h2>
<div class="text">Welcome to TutorialsPoint! </div>
</body>
</html>
Adding Text in the <SVG> Tag and Applying an Outline to the Text
Here, we’ll convert the text into an SVG image. We’ll then use various CSS properties to set the outline color, fill color, width, and more to add an outline effect to the text.
Syntax
You can use the following syntax to convert text to SVG and add an outline effect to the text using various CSS properties.
paint-order: stroke;
fill: color;
stroke: color;
In the syntax above, we set the fill color for the text. Similarly, we set the stroke color for the text. The ‘paint-order: stroke’ CSS property allows us to overlap the stroke color when the strokeWidth and fill values intersect.
Example 4
In the following example, we create an HTML element using the
<html>
<head>
<style>
svg {
font-size: 35px;
width: 490px;
height: 100;
}
.text {
stroke-width: 3px;
stroke-linejoin: round;
paint-order: stroke;
fill: white;
stroke: brown;
}
</style>
</head>
<body>
<h2>Add an outline effect to the text</h2>
<svg viewBox="0 0 490 100">
<text class="text" x="10" y="45">This text is inside an SVG element</text>
</svg>
</body>
</html>
We’ve seen three ways to add an outline effect to text. The first method uses three different CSS properties to change the text’s fill color and set the text’s stroke. The second method displays a “text-shadow” instead of the text. The third method converts the text to SVG and uses various SVG-related CSS properties to add an outline effect to the text.