How to create CSS3 Box and Text Shadow Effects?

CSSWeb DevelopmentFront End Technology

<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>
raja
Updated on 11-May-2020 09:44:44

Advertisements