Css text shadow with clip

Question

0.00/5 (No votes)

See more:

Hi,

I really like this text effect with an inset shadow, however because of the spread, it's also overflowing past the boundaries of each character. Is there any way to cause the shadow to just be on the inside of each character?

CSS

#text
{
        font: bold 64px 'Open Sans';
        color: transparent;
        background-color: black;
        text-shadow: 0px 0px 20px rgba(255,255,255,0.5);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
}

Preview: here[^]

What I have tried:

Adding another shadow the same colour as the background, didn't have any effect

Posted 19-Feb-18 6:22am

User 13204940

Updated 19-Feb-18 9:37am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

aaronzeng · Answer 1 · 2018-02-19T07:33:00

 13
down vote
favorite
3
	

I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}