How to create CSS3 Box and Text Shadow Effects?

---

<p>To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property, respectively.</p><p>Following is the code to create CSS3 Box and text shadow effects &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/gVmfFB3g" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { &nbsp; &nbsp;font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif; } h2 { &nbsp; &nbsp;color: rgb(28, 0, 128); &nbsp; &nbsp;text-shadow: red 2px 4px 2px; } div { &nbsp; &nbsp;color: white; &nbsp; &nbsp;text-align: center; &nbsp; &nbsp;width: 150px; &nbsp; &nbsp;height: 150px; &nbsp; &nbsp;background-color: red; &nbsp; &nbsp;box-shadow: rgb(89, 0, 255) 8px 2px 8px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Shadow effect example&lt;/h1&gt; &lt;h2&gt;Text shadows&lt;/h2&gt; &lt;div&gt;BOX SHADOW&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>The above code will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/38132/shadow_effect.jpg" class="fr-fic fr-dib" width="600" height="270"></p>

• Related Questions & Answers
• How to create CSS3 Transition Effects?
• Add shadow effects to text with CSS
• Text in Transparent Box using CSS3
• CSS Box Shadow
• Add shadow effects to elements with CSS
• Working with CSS3 Filter Effects
• CSS3 Box Width with Box-Sizing
• Adding Drop Shadow to Images using CSS3
• CSS Text Shadow
• Animate box-shadow CSS property
• Create white text with black shadow using CSS
• CSS3 Flexible Box Layouts
• How to add shadow on text swift?
• Animate CSS text-shadow property
• How to create shadow in Android Buttons?