Create multiple color shadows for HTML elements using CSS3

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

CSS3 allows adding of shadow(s) to HTML elements. This feature greatly enhances the appearance of an element.

The Basic Syntax

box-shadow: Xpx Ypx Bpx Lpx #abc;

Here:

  • Xpx = horizontal offset on x-axis
  • Ypx = vertical offset on y-axis
  • Bpx = shadow strength/blur effect
  • Lpx = shadow length
  • #abc = shdow color

When applied over an HTML element (<p>, <div> etc), its like

element-name
{
-webkit-box-shadow: 0px 0px 10px 1px orange;
-moz-box-shadow: 0px 0px 10px 1px orange;
box-shadow: 0px 0px 10px 1px orange;
}

box-shadow in css3

Note: As you see above, syntax for browsers are different. Here -webkit-box-shadow is for Safari and Chrome browsers, -moz-box-shadow is for Mozilla Firefox, and box-shadow is the CSS3 syntax for all browsers.

Creating Multiple color shadows

This is also possible using CSS3 with minor change in syntax. Here we add dimensions of all shadows and separate them by commas.

Here is an example,


<p></p>

<style>
p{
margin:100px;
width:500px;
height:150px;
-moz-box-shadow: -10px -10px 10px 1px lime, 10px 10px 10px 1px orange;
-webkit-box-shadow: -10px -10px 10px 1px lime, 10px 10px 10px 1px orange;
box-shadow: -10px -10px 10px 1px lime, 10px 10px 10px 1px orange;
}
</style>

multiple color shadows html elements div and p

This would provide a shadow of lime and orange colors. You can include as many colors as your want.

blog comments powered by Disqus