skip to Main Content

I’ve been working on front-end development but couldn’t implement the text with the shadow effect. Front-end is coded by HTML5, CSS3, bootstrap and AngularJS so in the design, there is the shadow effect at the text filed like the shadow effect in photoshop.

Please tell me how can I implement this shadow effect.

2

Answers


  1. you can use ‘text-shadow’ property.

    Read more about text shadow property: Text Shadow

    in this example it’ll effects h1 elements.

    h1 {
        text-shadow: 2px 2px #ff0000;
    }
    

    Syntax:

    text-shadow: h-shadow v-shadow blur-radius color;
    
    Login or Signup to reply.
  2. Note : Internet Explorer 9 and earlier do not support the text-shadow property.

    And should search Google before ask any question. because in this my answer is in first result of Google search.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
        text-shadow: 3px 3px #FF1111;
    }
    </style>
    </head>
    <body>
    
    <h1>Some Text</h1>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search