I can't make the inner shadow of text (an incorrect result)

Question

I encountered a problem when creating inner shadow for the text. I tried this method (some css does not work in such online-compilers, but the code is visible):

.text {
  background-color: #565656;
  font-size: 35px;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

<div class="text">
Text
</div>

The result is a light gray text, but I need the text of a different color. When I tried to change the text color and shadow color (not alpha), it became clear that, apparently, "background-clip: text;" do not cut the shadow in the text area, and I see a blurred silhouette outside the contours of letters.

This is what happens (the text and shadow colors are wrong here, but the overlap is visible):

And that's what I need:

@Paulie_D Thank you, but the same problem here, you can see if you change the background-color: http://jsfiddle.net/L83jntfw/ My background is a repeating pattern of a different color then the text. — Rumata, Aug 19 '16 at 20:43
Then I'd suggest you've designed yourself into a corner CSS can't get you out of. Sorry! :) — Paulie_D, Aug 19 '16 at 20:45
@Mojtaba It works like on the screenshot in google chrome, in firefox it works completely wrong: http://prnt.sc/c7w6o0 — Rumata, Aug 19 '16 at 20:48
@Paulie_D In the PSD design the layout it works)) there should be a solution ... besides creating new vector font) — Rumata, Aug 19 '16 at 20:49

score 1 · Answer 1 · answered Aug 19 '16 at 20:25

By using a background color the same as main shadow color it's possible, there may be other ways but this is the most common one I know of.

Source code -- https://codepen.io/vincicat/pen/zikrC

body {
  /* This has to be same as the text-shadows below */
  background: #def;
}

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  line-height: 1em;
  text-align:center;
}

.inset-text {
  /* Shadows are visible under slightly transparent text color */
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}

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

Thank you very much, but I have the pattern on the background of a different color than the text color and shadow... — Rumata, Aug 19 '16 at 20:28

Arif · Answer 2 · 2016-08-19T20:49:22.880

0

    .text {
  font-size: 50px;
  display:flex;
  justify-content: center;
  font-stretch: ultra-expanded;
  color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}

<div class="text">
Text
</div>

edited Aug 19 '16 at 20:49

answered Aug 19 '16 at 20:27

Arif

565
5
19

Thank you very much, it gives me an embossed outline text, but it requires a colored background. In my case background is a pattern of a different color. And, as I understand, it does not create an inner shadow, but paints the text in the color of it's shadow. – Rumata Aug 19 '16 at 20:38
@MaximVelichkin Check the current answer... used a background image – Arif Aug 19 '16 at 20:51
Thank you very much, this is a great way to create an extruded text outline! But I need a little bit different effect (I need the text to have an inner shadow, which differ in color from the color of the text). – Rumata Aug 19 '16 at 21:09

I can't make the inner shadow of text (an incorrect result)

2 Answers2