Question 42733 in Html Question posted in
Some basic documentation can be found here.

Create an "empty" heading with glowing effect – Html

I am more of a backend developer but got side gig. I have to do a landing page with gloving heading. It should look like this:
Glowing Heading

I tried to use -webkit-text-stroke but it looks odd, something is wrong with some letters:
My Glowing Heading

Google or chatgpt is no help here. Can somebody maybe have idea how to approach this?

Here are my codepen and figma:
Codepen:
Codepen

Figma:
Figma

I tried to search for help in google and chatgpt but nothing worked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved, turned out, there was a problem with google fonts. After importing font from Adobe Font, everything works fine.


  2. 0

    Check this code snipppet, if you want to remove the excessive glowing, you can either remove some text-shadows or change the radius or both.

    Is this good for you?

    body {
  background-color: #2C2B43;
}

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  color: rgba(0, 0, 0, 0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 144.4%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0px 0px 2.5996px #9950E2, 0px 0px 6.9141px #9950E2, 0px 0px 11.5332px #9950E2
}
    <h1>
  Ogarnij porzucone koszyki
</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search