How to Create a Text Stroke (Outline) Effect with HTML and CSS

Introduction

A text stroke (outline) effect in CSS adds a border around each letter, making the text stand out. This can be achieved using the -webkit-text-stroke property. The stroke effect outlines the text without affecting its fill color, making it a popular design technique for creating bold, impactful text.

In this tutorial, you'll learn how to create a text stroke effect using HTML and CSS.

Problem Statement

Create a CSS code that:

Adds a stroke (outline) effect to text using the -webkit-text-stroke property.
Demonstrates how to control the stroke's width and color.

Example:

Input: A heading element with the text "Text Stroke Effect".
Output: The text appears with an outline or stroke around each character.

Solution Steps

Use -webkit-text-stroke Property: Apply the -webkit-text-stroke property to add an outline around the text.
Control Stroke Width and Color: Set the width and color of the stroke to customize the appearance.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Stroke Effect</title>
    <style>
        /* Step 1: Create text stroke effect */
        .stroked-text {
            font-size: 4rem;
            font-weight: bold;
            color: white; /* Text fill color */
            -webkit-text-stroke: 2px black; /* Stroke width and color */
            text-align: center;
            font-family: Arial, sans-serif;
        }

        /* Center the text container */
        .container {
            text-align: center;
            margin-top: 100px;
            background-color: #333; /* Background for contrast */
            padding: 50px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="stroked-text">Text Stroke Effect</h1>
    </div>

</body>
</html>

Explanation

Step 1: Use `-webkit-text-stroke` for the Stroke Effect

To create a text stroke effect, use the following CSS:

.stroked-text {
    font-size: 4rem;
    font-weight: bold;
    color: white; /* Text fill color */
    -webkit-text-stroke: 2px black; /* Stroke width and color */
}

The -webkit-text-stroke property defines both the stroke width and the stroke color. In this case, the stroke is 2px wide and black, while the text itself is filled with white.

Step 2: Customize the Stroke Width and Color

You can change the stroke's width and color by adjusting the value of the -webkit-text-stroke property. For example, to create a thicker stroke, you can increase the pixel value:
```
-webkit-text-stroke: 4px red; /* Example with a 4px red stroke */
```

Step 3: Set Background Color for Contrast

The dark background (#333) helps the white text and black stroke stand out, making the stroke effect more visually striking.

Output

How to Create a Text Stroke (Outline) Effect with HTML and CSS

Conclusion

Creating a text stroke (outline) effect in CSS is straightforward using the -webkit-text-stroke property. You can easily customize the stroke's width and color to achieve bold and visually appealing text effects, making your text stand out on the page.

Java Guides

Search This Blog