CODEWITHSUNDEEP
htmlcss
user3718908x100
user3718908x100

Reputation: 8519

Text Shadow Effect with CSS3

i have the following designed with CSS:

enter image description here

And I love the way the text sort of sinks into the background, like a depression. Now I tried replicating the same effect using CSS for some other colours:

enter image description here

enter image description here

enter image description here

As you can see it doesn't look as it should like in the first image, the text does not have the same depression or 'sunk in' look as the first image. I tried playing around with the CSS text-shadow effect but i could not get these three to look like the first.

Upvotes: 1

Views: 688

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34426

Here is some fairly simple CSS for 'inset' shadow - 

.inset {
    color: rgb(50, 50, 50);
    font-size: 50px;
    background-color: rgb(200, 200, 200);
    text-shadow: rgb(175, 175, 175) -1px -1px 0px;
}
<div class="inset">Inset Shadow</div>

You will have to play with the settings to tweak them for your use.

Upvotes: 2

Junaid S.
Junaid S.

Reputation: 2652

Here is the link for text shadow generation. It is quite compatible with all the major browsers.

Upvotes: 0

Related Questions