How to create a transparent text with stroke in CSS?

Demo:

*to see the transparent text with stoke on the website click here.

To create a transparent text with stoke in CSS follow the steps below:

Step1.

Add HTML

Create a div element and add the text:

<div class="seaside">SEASIDE</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Add background image and style the text:

.seaside {
  position: relative;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/07/brighton-1.jpg');
  width: 640px;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  font-weight: 900;
  font-family: tahoma;
  -webkit-text-stroke: 5px white;
  -webkit-text-fill-color: transparent;  
}

Enjoy coding!

Share this: