Is there a box-shadow-color property

Question

I have the following CSS   box-shadow  inset 0px 0px 2px  a00    Now I am trying to extract that color to make the page colors  skinnable   Is there any way of doing this  Simply removing the color  and then using the same key again later overwrites the original rule   There doesn t seem to be a box-shadow-color  at least Google turns nothing up

User · Answer

You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo

User · Answer

You can do this with CSS Variable   box-shadow       --box-shadow-color   000     Declaring the variable        width  30px                      height  30px      box-shadow  1px 1px 25px var --box-shadow-color      Calling the variable         box-shadow hover        --box-shadow-color   ff0000     Changing the value of the variable

User · Answer

Maybe this is new  I am also pretty crap at css3   but I have a page that uses exactly what you suggest   -moz-box-shadow  10px 10px 5px  384e69  -webkit-box-shadow  10px 10px 5px  384e69  box-shadow  10px 10px 5px  384e69        and it works fine for me  in Chrome at least

User · Answer

No   http   www w3 org TR css3-background  the-box-shadow  You can verify this in Chrome and Firefox by checking the list of computed styles   Other properties that have shorthand methods  like border-radius  have their variations defined in the spec   As with most missing  long-hand  CSS properties  CSS variables can solve this problem    el       --box-shadow-color  palegoldenrod      box-shadow  1px 2px 3px var --box-shadow-color       el hover       --box-shadow-color  goldenrod

User · Answer

Actually    there is  Sort of  box-shadow defaults to color  just like border does   According to http   dev w3 org      the-box-shadow     The color is the color of the shadow  If the color is absent  the used   color is taken from the    color    property    In practice  you have to change the color property and leave box-shadow without a color   box-shadow  1px 2px 3px  color   a00    Support   Safari 6   Chrome 20   at least  Firefox 13   at least  IE9   IE8 doesn t support box-shadow at all     Demo   x000D   x000D  div   x000D      box-shadow  0 0 50px  x000D      transition  0 3s color  x000D    x000D   green   x000D      color  green  x000D    x000D   red   x000D      color  red  x000D    x000D  div hover   x000D      color  yellow  x000D    x000D   x000D    demo style   x000D  body   x000D      text-align  center  x000D    x000D  div   x000D      display  inline-block  x000D      background  white  x000D      height  100px  x000D      width  100px  x000D      margin  30px  x000D      border-radius  50   x000D    x000D   lt div class  green  gt  lt  div gt  x000D   lt div class  red  gt  lt  div gt  x000D   x000D   x000D    The bug mentioned in the comment below has since been fixed

User · Answer

A quick and copy paste you can use for Chrome and Firefox would be    change the stuff after the   to change the color    -moz-border-radius  10px  -webkit-border-radius  10px  -khtml-border-radius  10px  -border-radius  10px  -moz-box-shadow  0 0 15px 5px  666  -webkit-box-shadow  0 0 15px 05px  666    Matt Roberts  answer is correct for webkit browsers  safari  chrome  etc   but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows

User · Answer

Yes there is a way  box-shadow 0 0 17px 13px rgba 30 140 255 0 80  inset

[css] Is there a 'box-shadow-color' property?

Examples related to css

Examples related to box-shadow