124

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):

But I cannot find a way to create text shadows inside the text. I wonder whether it is still possible because the box-shadow element is able to render shadow inside like this:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Any ideas?

3
  • 4
    No answer for this if you're not prepared to go for some optical illusions... Sep 19, 2011 at 8:41
  • To save someone the time, all provided solutions break when text needs to be white. Nov 10, 2023 at 11:00
  • The inset keyword has been added on the CSS Text Decoration Module Level 4 WC3 editor's draft around May 4th 2022. Which is to say, the feature doesn't exist yet but should be added in the future... unless deferred. drafts.csswg.org/css-text-decor-4/#propdef-text-shadow Mar 16 at 15:07

19 Answers 19

107

Here's a little trick I discovered using the :before and :after pseudo-elements:

The title attribute needs to be the same as the content. Demo: http://dabblet.com/gist/1609945

/**
 * A "deeper" indented text effect with the :before and :after pseudo-elements.
 */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #0A539C;
  background: linear-gradient(top, #4293d6 0%, #001e96 100%);
  overflow: hidden;
}

.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}
<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>

7
  • 1
    Nice! Creative :) Still not as Photoshop-esque as I'd like it to be. You can set the top/left values to 5px each to achieve a 5px inner shadow offset but then the letter leaks out on the other end - which looks great for 1px and 2px but weird for higher values. Jan 14, 2012 at 11:58
  • 1
    Yeah, it only looks good with a slight hint of white on the bottom. Any more than 2px destroys the look. Jan 14, 2012 at 16:38
  • 1
    Awesome! You can use this to do white text too by pumping up the opacity to .9, or create beveled edges by keeping opacity at .1 and reversing the colors. (+1)
    – JohnB
    Apr 11, 2012 at 14:11
  • Great solution. However, fails in combination with f.e. text gradients ;( too bad. guess we'll have to wait for CSS4 for some years or so for great text effects.
    – Michahell
    Jul 20, 2012 at 22:54
  • That's cool in chrome, I'm struggling to do an alternative fall-back for FF, that won't apply to Chrome without using JS and a namespace class. Any thoughts. P.S. Works beautifully on a leathr effect bg, looks like a branding stamp. Sep 6, 2012 at 12:04
50

You should be able to do it using the text-shadow, erm somethink like this:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

here's an example: http://jsfiddle.net/ekDNq/

3
  • 9
    Hum, yeah, kind of. The visual effect is similar with these parameters but it still is a shadow behind the font. Not inside. In my example I even blur the inset shadow and that would destroy the effect here. So ... best solution yet but still just a visual illusion hack ;) Nov 6, 2010 at 10:44
  • 3
    Note that you're making the font fatter by doing this. For small and medium sized fonts, that may not be want you want. Mar 28, 2013 at 9:22
  • This is outside not inner Apr 6, 2023 at 15:49
26

An elegant example without the need for a positioned wrapper or duplicative content in the markup:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
<center>
  <h1>Text With Inner Shadow</h1>
</center>

Looks good on dark backgrounds as well:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}
<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

AND ME LINK AND ME2 LINK

1
  • 5
    Simple and doesn't require any adjustments to markup. Great work!
    – vhs
    Jan 25, 2019 at 12:02
18

Here's my best try:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }
   
    <span class="inner_shadow">Inner Shadow</span>
   

The problem is how to clip the shadow that bleeds around the edges!!! I tried in webkit using background-clip:text, but webkit renders the shadow above the background so it doesn't work.

Making a Text Mask with CSS?

Without a top mask layer it is impossible to do a true inner shadow on text.

Perhaps someone should recommend that the W3C add background-clip: reverse-text, that would cut a mask through the background instead of cutting the background to fit inside the text.

Either that or render the text-shadow as part of the background and clip it with background-clip: text.

I tried absolutely positioning an identical text element above it, but the problem is background-clip: text crops the background to fit inside the text, but we need the reverse of that.

I tried using text-stroke: 20px white; on both this element and the one above it, but the text stroke goes in as well as out.

Alternate Methods

Since there is currently no way to make an inverted-text mask in CSS, you could turn to SVG or Canvas and make a text replacement image with the three layers to get your effect.

Since SVG is a subset of XML, SVG text would still be select-able and searchable, and the effect can be produced with less code than Canvas.

It would be harder to achieve this with Canvas because it doesn't have a dom with layers like SVG does.

You could produce the SVG either server-side, or as a javascript text-replacement method in the browser.

Further Reading:

SVG versus Canvas:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Clipping and Masking with SVG Text:

http://www.w3.org/TR/SVG/text.html#TextElement

3
15

More precise explanation of the CSS in kendo451's answer.

There's another way to get a fancy-hacky inner shadow illusion,
which I'll explain in three simple steps. Say we have this HTML:

<h1>Get this</h1>

and this CSS:

h1 {
  color: black;
  background-color: #cc8100;
}

It's a good slogan

Step 1

Let's start by making the text transparent:

h1 {
  color: transparent;
  background-color: #cc8100;
}

It's a box

Step 2

Now, we crop that background to the shape of the text:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

The background is the text!

Step 3

Now, the magic: we'll put a blurred text-shadow, which will be in front of the background, thus giving the impression of an inner shadow!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

We got it! Yay!

See the final result.

Downsides?

  • Only works in Webkit (background-clip can't be text).
  • Multiple shadows? Don't even think.
  • You get an outer glow too.
3
  • 1
    "Multiple shadows? Don't even think." What about text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;?
    – Morpheus
    Aug 2, 2013 at 13:20
  • @Morpheus One of the downsides of this method is that you can't apply multiple shadows to the text. Aug 2, 2013 at 14:32
  • The size and brightness of this example are making it difficult to view others. Could you perhaps move these into code snippets? Thanks!
    – vhs
    Jan 25, 2019 at 13:00
11

There's no need for multiple shadows or anything fancy like that, you just have to offset your shadow in the negative y-axis.

For dark text on a light background:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

If you have a dark background then you can simply invert the color and y-position:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

Play around with the rgba values, the opacity, and the blur to get the effect just right. It will depend a lot on what color font and background you have, and the weightier the font, the better.

3
  • 3
    Still just an optical illusion, no real inner shadow. Apr 15, 2011 at 8:50
  • 26
    ...aren't all shadows an optical illusion? Aug 9, 2011 at 18:48
  • you're grumpy @eteubert... really mean Jul 10, 2013 at 14:51
10

You can kind of do this. Unfortunately there's no way to use an inset on text-shadow, but you can fake it with colour and position. Take the blur right down and arrange the shadow along the top right. Something like this might do the trick:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... but you'll need to be really, really careful about which colours you use otherwise it will look off. It is essentially an optical illusion so won't work in every context. It also doesn't really look great at smaller font sizes, so be aware of that too.

3
  • Not really what I am looking for. The effect of your proposal is interesting but far from the example I posted. May 22, 2010 at 20:16
  • Then in that case there's no answer, not with CSS3. Sorry I couldn't help.
    – hollsk
    May 22, 2010 at 20:36
  • Inset shadows are possible using background-clip as shown in this answer.
    – vhs
    Jan 25, 2019 at 13:03
8

Try this little gem of a variation:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

I usually take "there's no answer" as a challenge

2
  • 1
    This creates a white outline at the bottom of the font but I was looking for black blurry inner shadow. Jun 26, 2010 at 9:40
  • 1
    This worked best for me, especially when shadowing smaller text. I suggest tweaking RGB values a bit if necessary to get it looking right with your font color. Jan 7, 2011 at 19:08
7

I've seen many of the proposed solutions, but none were quite what I was hoping.

Here's my best hack at this, where the color is transparent, the background and the top text-shadow are the same color with varying opacities, simulating the mask, and the second text-shadow is a darker, more saturated version of the color you actually want (pretty easy to do with HSLA).

enter image description here

(btw, text and styling based upon a dupe thread's OP)

0
6

I've had a few instances where I've needed inner shadows on text, and the following has worked out well for me:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

This sets the opacity of the text to 80%, and then creates two shadows:

  • The first is a white shadow (assuming the text is on a white background) offset 1px from the left and 2px from the top, blurred 3px.
  • The second is a black shadow which is visible through the 80% opacity text but not through the first shadow, which means it's visible inside the text letters only where the first shadow is displaced (1px from the left and 2px from the top). To change the blur of the this visible shadow, modify the blur parameter for the first layer shadow.

Caveats

  • This will only work if the desired color of the text can be achieved without it having to be at 100% opacity.
  • This will only work if the background color is solid (so, it won't work for the questioner's specific example where the text sits on a textured background).
4

Seems everyone's got an answer to this one. I like the solution from @Web_Designer. But it doesn't need to be as complex as that and you can still get the blurry inner shadow you're looking for.

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}
0
3

Building on the :before :after technique by web_designer, here is something that comes closer to your look:

First, make your text the color of the inner shadow (black-ish in the case of the OP).

Now, use an :after psuedo class to create a transparent duplicate of the original text, placed directly on top of it. Assign a regular text shadow to it with no offset. Assign the original text color to the shadow, and adjust alpha as needed.

http://dabblet.com/gist/2499892

You don't get complete control over spread, etc. of the shadow like you do in PS, but for smaller blur values it is quite passable. The shadow goes past the bounds of the text, so if you are working in an environment with a high contrast background-foreground, it will be obvious. For lower contrast items, especially ones with the same hue, it's not too noticeable. For example, I've been able to make very nice looking etched text in metal backgrounds using this technique.

3

Here's a great solution for TRUE inset text shadow using the background-clip CSS3 property:

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
3
  • That link appears to be broken now.
    – Nick White
    Sep 30, 2012 at 22:11
  • Looks nice in webkit, but still a no-go for Firefox 18.
    – user110857
    Feb 15, 2013 at 20:02
  • This may have limited support, but I love this one as it's really inset.
    – Julian K
    Jun 19, 2013 at 0:53
3
color: transparent;
font-size: 17rem;
text-shadow: 1px 1px 5px white, 0px 0px 0px black;

Result:

2

Here's what I came up with after looking at some of the ideas here. The main idea is that the color of the text blends with both shadows, and note that this is being used on a grey background (otherwise the white won't show up well).

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}
1

There's a much simpler way to achieve this

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voilà

1

For normal-sized text on small-ish buttons

I found the other ideas on this page to lose their efficacy when used on small buttons with small text lettering. This answer expands on RobertPitt's answer.

Here is the minor tweak:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});
body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

Note:

I used this site to finesse the color shades.

0
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

for box shadow:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

you can see online text and box shadow: online text and box shadow

for more example you can go to this address : more example code freeclup

0

Try this example for inset text shadow. Here's the HTML

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

and the CSS

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.