I ran into a problem while creating an inner shadow for the text. I tried this method (some css for some reason does not work in such online compilers, but the code is visible):

.text { background-color: #565656; 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 another color tapest. When I tried to change the color of the text and the color of the shadow (not alpha), it became clear that] 6 apparently, "background-clip: text;" it doesn’t clip the text area, and I see a blurred silhouette outside the contours of the letters.

This is what happens (here the colors for text and shadow are probably mixed up in places, but overlapping is visible):
enter image description here
But what you need:
enter image description here

    3 answers 3

    The size of the text is small, maybe that's why the shadow dissipates a lot, try reducing the size of the shadow or increasing the size of the text, if of course I understood you correctly ...

     .text { background-color: #565656; color: transparent; text-shadow: 1px 1px 0px rgba(255,255,255,1); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } .text2 { background-color: #565656; color: transparent; font-size: 30px; text-shadow: 0px 1px 1px rgba(255,255,255,1); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } 
     <div class="text"> Text </div> <div class="text2"> Text </div>

    • Thank you, but changing the size of the text does not help, reducing the size of the shadow makes the shadow overlapping the outline of the text less noticeable, but it should be completely absent, why is it not cropped using background-clip: text? .. - Rumata
    • The method is described here: habrahabr.ru/post/154211 I tried with <h1> and <span> - Rumata
    • In order for this method to work, there must necessarily be a solid background that will blend in with the color of the shadow. Here is an example codepen.io/L2Banners/pen/AXzyWY shadow exists, but it merges with the background and creates the effect of the inner shadow because the color of the text is transparent. - l2banners

    100% version , working in all browsers, try:

     @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); /* CHANGE ME TO ANY COLOR TO EXPERIMENT */ body { background: #ffcccc; margin: 0; } .content { padding: 75px 0; } .stripes-overlay { position: absolute; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); -moz-background-size: 4px 4px; -o-background-size: 4px 4px; -webkit-background-size: 4px 4px; background-size: 4px 4px; z-index: -1; } h1 { font-size: 5em; text-align: center; margin-bottom: .5em; } p { font-size: 1.5em; font-family: sans-serif; font-weight: 100; text-align: center; color: rgba(77, 0, 0, 0.75); } .brand { font-family: "Open Sans", sans-serif; font-weight: 700; color: rgba(255, 0, 0, 0.75); } /* the magic */ .inner-shadow { text-shadow: 1px 2px 4px #ffe6e6, 0px 0px 0px black, 0px 0px 2px white; } / svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI + PGRlZnM + PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI + PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA ='); @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); /* CHANGE ME TO ANY COLOR TO EXPERIMENT */ body { background: #ffcccc; margin: 0; } .content { padding: 75px 0; } .stripes-overlay { position: absolute; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); -moz-background-size: 4px 4px; -o-background-size: 4px 4px; -webkit-background-size: 4px 4px; background-size: 4px 4px; z-index: -1; } h1 { font-size: 5em; text-align: center; margin-bottom: .5em; } p { font-size: 1.5em; font-family: sans-serif; font-weight: 100; text-align: center; color: rgba(77, 0, 0, 0.75); } .brand { font-family: "Open Sans", sans-serif; font-weight: 700; color: rgba(255, 0, 0, 0.75); } /* the magic */ .inner-shadow { text-shadow: 1px 2px 4px #ffe6e6, 0px 0px 0px black, 0px 0px 2px white; } 
     <div class="stripes-overlay"></div> <div class="content"> <h1 class="inner-shadow brand">Inner Shadow</h1> </div>

      Try this: box-shadow: inset 0 0 10px #000;

      • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦