htmlcsscss-selectors

How can I apply text shadow with a stroke using CSS?

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

enter image description here

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

  • Update: 9 Dec 2024

    To avoid adding the string in CSS, we can leverage the attr() CSS function. This will use the value in a specific attribute from the selected HTML tag.

    In this case, I added the data-content attribute to the element and referenced it in the content property of the :before pseudo-element.

    body {
  background-color: black;
}

.stroke-shadow {
  color: white;

  position: relative
}

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


p {
  font-weight: 700;
  font-size: 100px;
}
    <p class="stroke-shadow" data-content="CREATE">CREATE</p>

    Initial:

    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: 100px;
}
    <p class="stroke-shadow">CREATE</p>