how to create a design similar to this image text with CSS

June 6, 2023

I want to style this text exactly similar to attached image, tried using text-shadow but not get exact similar results. I want to add a border on shadowed text. Please provide a better a solution!

Thanks

body {
  background-color: black;
}

.stroke-shadow {
  color: white;
  text-shadow: -7px -7px 0px #FF29ED;
}

p {
  font-weight: 700;
  font-size: 200px;
}

<p class="stroke-shadow">CREATE</p>

>Solution :

One solution for CSS only is to use the :before pseudo element. However, this would require adding the specific string in the content rule.

body {
  background-color: black;
}

.stroke-shadow {
  color: white;

  position: relative
}

.stroke-shadow:before {
  content: "CREATE";
  color: black;
  
  -webkit-text-stroke: 2px #FF29ED;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
}


p {
  font-weight: 700;
  font-size: 200px;
}