CSS text-shadow in Hindi

📔 : CSS 🔗

text-shadow property का use text में shadow apply करने के लिए किया जाता है। text-shadow shadow apply करने के लिए shorthand property है।

p{
  text-shadow : 3px 3px;
}

Simple text shadow example

दिए गए example में सिर्फ horizontal shadow (3px) और vertical shadow (3px) apply हो रही है।

CSS text-shadow example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-shadow example</title>
  </head>
    <p style="text-shadow : 3px 3px;font-size:30px">Simple text shadow example</p>
  <body>
  </body>
</html>

Add color

color add करने के लिए simply horizontal और vertical shadow के बाद color name define कर देना है।

p{
  text-shadow : 3px 3px red;
}

Simple text shadow example

Simple text shadow example

Simple text shadow example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-shadow example</title>
  </head>
    <p style="text-shadow : 3px 3px red;font-size:30px">Simple text shadow example</p>
    <p style="text-shadow : 3px 3px gold;font-size:30px">Simple text shadow example</p>
    <p style="text-shadow : 3px 3px green;font-size:30px">Simple text shadow example</p>
  <body>
  </body>
</html>

Other Examples

p{
  text-shadow : 3px 3px 5px red;
}

p{
  text-shadow : 3px 3px 5px red, 3px 3px 5px blue;
}

Other text shadow example

Other text shadow example

Other text shadow example

Antoerh text shadow examples

Antoerh text shadow examples

Antoerh text shadow examples

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-shadow example</title>
  </head>
    <p style="text-shadow : 3px 3px 5px red;font-size:30px">Other text shadow example</p>
    <p style="text-shadow : 3px 3px 5px gold;font-size:30px">Other text shadow example</p>
    <p style="text-shadow : 0px 0px 5px green;font-size:30px">Other text shadow example</p>
    <p style="text-shadow : 5px 2px 2px red, 7px 2px 2px green;font-size:30px">Antoerh text shadow examples</p>
    <p style="text-shadow : 5px 2px 2px blueviolet, 7px 2px 2px red;font-size:30px">Antoerh text shadow examples</p>
    <p style="text-shadow : 5px 2px 2px gold, 7px 2px 2px green;font-size:30px">Antoerh text shadow examples</p>
   <body>
  </body>
</html>

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers