How to remove sharp edges in text-stroke css? - css

Question

I have this code
-webkit-text-stroke: 30px #67676726;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
this is like a glass effect at the back of text. what I need is I want to remove the sharp edges
it's when I increase the width of text-stroke
It is much appreciated for those who can help me.
PURE CSS only

Answer 1

You could try to wrap your text inside a div tag, add width and height and set the overflow to hidden so your edges get cut off.
Here an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
margin: 40px;
width: 160px;
height: 39px;
position: relative;
overflow: hidden;
}
h1 {
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
-webkit-text-stroke: 20px #0e000026;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
}
<div class="text">
<h1>LetterNVZ</h1>
</div>