Question 235671 in CSS Question posted in
Some basic documentation can be found here.

CSS Text shadow with greater offsets

Need a little help in making text shadow shown in below image enter image description here

I tried using CSS text-shadow property but its not working as same as i want.

text-shadow:
    6px 6px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -6px -6px 0 #000,  
    6px -6px 0 #000,
   -6px  6px 0 #000,
    6px  6px 0 #000;
Tags:

2

Answers


  1. 0

    Hope this help.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #E8D6E9;
        }
        
        .container {
            position: relative;
            background-color: blue;
        }

        span:nth-child(1) {
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 128px;
            -webkit-text-stroke: 30px #A155A5;
        }
        span:nth-child(2) {
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 128px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <span>Mental Health</span>
        <span>Mental Health</span>
    </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Try use this it gave me a really nice effect.

    text-shadow: 0px 0px 10px white;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search