CSS Stencil Effect

Last Updated : 01 Jul, 2020

The Stencil effect is a classical text effect that has emerged in the last decade. This type of effect is generally used in websites where the User Interface is not of main concern. Examples of such designs can be found on movie downloading websites where the interface is not the best looking as the main concern is on the working of the website. The developer of the website may not want to waste resources in designing and building a good looking website.

Approach: The approach is to use the webkit-stroke CSS properties to create a stroke/outline around the text.

HTML Section: In this section, the text that has to be styled is declared. The text is declared in a heading tag for this example.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>
    Stencil Effect
  </title>
</head>
<body>
  <h1>Geeks</h1>
</body>
</html>

CSS Section: Follow the steps for making the required stencil effect:

Step 1: Apply basic styling to the text like font-size, family or color as needed. The text can also be transformed to uppercase for better visibility.
Step 2: Use the -webkit-text-fill-color property to make the text transparent. This can be done by setting the property to "transparent".
Step 3: Use the -webkit-text-stroke-width property to set the width of the stroke or outline of the text. This property can be set to the required value with a suitable unit.

Tip: It is recommended to keep the width as low as possible to make the text look more pleasing to the eye.

CSS

h1 {
  font-family: sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 6em;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
}

Complete Code: It is the combination of the above two sections of code.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Stencil Effect</title>

    <style>
        h1 {

            /* Apply basic styling to
               the text */
            font-family: sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 6em;
            color: black;

            /* Make the text fill 
               transparent */
            -webkit-text-fill-color: transparent;

            /* Set the stroke width 
               of the text */
            -webkit-text-stroke-width: 2px;
        }
    </style>
</head>

<body>

    <!-- Define the text 
        to be styled -->
    <h1>Geeks</h1>
</body>

</html>

Output:

Text Split Effect using CSS

sirohimukul1999

Improve

Article Tags :

CSS Stencil Effect

Similar Reads

Thank You!

What kind of Experience do you want to share?