CODEWITHSUNDEEP
csstextstroke
RTAS
RTAS

Reputation: 1

How do I apply text stroke in CSS that only appears around the outside of the individual letters?

I am trying to apply text stroke for some headings for a webpage that I am building but regardless of whether I'm using -webkit-text-stroke or exporting the heading as a SVG, the text stroke is always applied incorrectly.

I have tried using -webkit-text-stroke, but it isn't achieving the look I want. I initially designed the webpage in Figma and tried exporting the heading as a SVG, but when I try this the text stroke is being applied to the inside of the letters (see the first image below) despite having specified in Figma that it should only be applied on the outside. Am I missing something here?

These are the different ways I've tried applying -webkit-text-stroke:

Example 1 -webkit-text-stroke: 1px #000000; -webkit-text-fill-color: #F45800;

Example 2 -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 1px;

Is there a way to apply genuine text stroke to only the outside of the letters? I have seen other people suggesting to use text-shadow, but honestly it doesn't achieve the exact same look.

I've included examples below of what I'm trying to achieve vs what I'm currently working with.

This is what I am trying to achieve in CSS

This is what I get when exporting as a SVG from Figma AND using -webkit-text-stroke in CSS

Thanks in advance!

Upvotes: 0

Views: 1304

Answers (2)

Lucas
Lucas

Reputation: 1

The best solution I found is the following but it still doesn't exactly match the desired design I guess. On figma the edges are more rounded

 * {
 background-color : rebeccapurple
 }

.stroke-text {
    position: relative;

    font-size: 36px;
    color: rebeccapurple;
    text-shadow:
      0 0 6px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(0, 0, 0, 0.2);

    z-index: 2;
  }

  .stroke-text::before {
    position: absolute;

    content: attr(data-text);

    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: #FFF;
  }
<p class="stroke-text" data-text="
I feel like this is the best solution.">
I feel like this is the best solution.</p>

Upvotes: 0

Brett Donald
Brett Donald

Reputation: 14432

I can’t see anything wrong with this:

h1 {
  font-family: sans-serif;
  font-size: 3em;
  font-style: italic;
  text-transform: uppercase;
  color: tomato;
  -webkit-text-stroke: 2px black;
  margin: 0;
}
<h1>Hello</h1>

Upvotes: -1

Related Questions