Html Question posted in
Some basic documentation can be found here.

Html – Inner shadow in text using css

.leftSide > p {
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
color: #2A2A2A;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
}
<div className={styles.leftSide}>
   <p>A</p>
</div>

So I have this Figma design where i need to add inner shadow to the text.Figma Design

Here is my code so far:

.leftSide > p {
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
color: #2A2A2A;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
}

<div className={styles.leftSide}>
   <p>A</p>
</div>

Any idea how i can make this work because i tried some stuff but nothing to work. So i thought i might ask here for help.

Thanks in return

Tags:

2

Answers


  1. 0

    Add .leftSide class to your CSS.

    .leftSide{
background-color:#1e1e1e;
width:fit-content;
}

.leftSide > p {
color:#2a2a2a;
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
/*text-shadow: 0px 8px 0px  rgba(200, 200, 200, 0.25), -1px -1px 5px rgba(200, 200, 200, 0.25);*/
}
    <div class="leftSide">
   <p>ABCDEFG</p>
   </div>
    Login or Signup to reply.
  2. 0 
            .leftSide{
   background-color: #000000;
   width: fit-content;
  }

.Side > p {
   color: #2a2a2a;
   font-size: 170px;
   font-family: 'QuickSand';
   text-align: end;
   -webkit-background-clip: text;
   background-clip: text;
   text-shadow: 
       1px 1px 5px rgba(0, 0, 0, 0.25), 
      -1px -1px 5px rgba(0, 0, 0, 0.25),
       0px 0px 10px rgba(0, 0, 0, 0.5),  /* Improve inner shadow */
      -1px -1px 10px rgba(0, 0, 0, 0.5); /* Improve inner shadow */
}

Here is HTML

    <div class="Side"> <p>Abdullah</p> </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search