Search code examples
htmlcssbox-shadow

What does this box-shadow query mean and how can I make it corss-browser friendly?

I have layout inside Adobe Xd. Inside this layout I can export the css values of a design element.

My element has a box shadow. When I try to export it it looks like this:

box-shadow: 0px 5px 15px #0000001A;

Obviously #0000001A is not a valid hex color string. I assume the 1A means alpha / opacity but I'm not sure.

surprisingly this syntax works in chrome and as expected not in most other browsers.

How can / should I write this box-shadow query to support all modern browsers?

Solution

  • #0000001A is equivalent to rgba(0, 0, 0, 0.1), where 0.1 is the approximate value of 0x1a / 0xff. So,

    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);

    Also, #RRGGBBAA format is standard, and works for everything — except, as usual, Microsoft browsers (table); not just Chrome.