Is There a 'Box-Shadow-Color' Property

Is there a 'box-shadow-color' property?

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;
}

CSS custom properties in box-shadow color function render incorrectly in Safari

I have got a solution to your problem, if you simply add variable color in box shadow then it won't work in Safari browser. However by doing some manipulation in code, you can do it easily.

Here are few steps to do..

Select any root color in RGB value.
```
:root {
     --color: 130, 16, 253;
 }
```
Add same color but with some opacity to root for box shadow. Here is a trick you are using one variable in another --shadowColor variable.
```
:root {
    --color: 130, 16, 253;
    --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
}
```

Apply color and box shadow to any object.


.feature_box
{   
    color: rgba(var(--color), 1);
    -webkit-box-shadow: var(--shadowColor);
    box-shadow: var(--shadowColor);
}

Enjoy:)

Is there any way to change box shadow without passing a color?

Box-shadow cannot be broken into parts like for example border can. But a trick you can use is that box-shadow inherits its color from the color attribute of the element.

<div class="box">
</div>

<div class="shadow box">
</div>

.box{
  box-shadow: 0 0 10px;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #fff;
}

.box.shadow{
  color: rgba(255,0,0,.3);
}

http://jsfiddle.net/82z8r73o/

Use background-color of parent as box-shadow color

CSS does not provide a special value that corresponds to the computed background color of an element akin to currentColor (which corresponds to the foreground color; that is, color — it shouldn't be corresponding to border-color even if it's set to a different value to color).

You could cheat by setting color to the desired background color and background-color: currentColor along with the box shadow, putting the label text in its own element within the label element, and giving that new element the intended font color.

The inherit keyword can only exist by itself in a CSS declaration. It cannot be used as a single component in a set of values. This means while box shadows can inherit, the entire box-shadow property must be inherited in full. When that happens, what ends up inherited is the box shadow of the parent element — which won't work either since the parent has no box shadow.

Default box shadow color?

See: https://developer.mozilla.org/en/css/box-shadow

<color> (optional)

See <color> values for possible keywords and notations.
If not specified, the color depends on the browser. In Gecko
(Firefox), the value of the color
property is used. WebKit's shadow is
transparent and therefore useless if
<color> is omitted.

You can only set the color inside box-shadow, for example:

box-shadow: 4px 4px 5px #ccc;

You simply can't set it separately, because as you pointed out, no box-shadow-color property exists.

Can box-shadow CSS property have padding?

Yes you can add two shadows, and make the inner one have the same color as the background. I don't like this approach though and would rather use border and outline for that.

div {
  margin: 50px;
  width: 300px;
  height: 100px;
  background-color: aquamarine;
  box-shadow: 0px 0px 0px 8px #FFFFFF, 0px 0px 0px 17px #CCC7CA;
}

<div></div>

Box shadow color based on colors from image?

You need to use JavaScript for this as you mention.
There are a few different options of plug-ins that you can use but the two most populare are:

Color Thief
VibrantJS

Extract the dominant color of the image, and apply an inline box-shadow style with that color on the particular element.

Why boxShadow can change the background color of the container?

Adding BoxShadow to a Container without any color property defined will change how the Container looks like. By default, the color of a Container is set to transparent. BoxShadow adds a shadow effect on the edges of the Container. Offsetting it will make the BoxShadow move its x and y-position. That is why you see that the background color of the Container change when adding BoxShadow. Also, I would recommend using Card. It is easier to add shadows to a widget using it and it adds a small BorderRadius to the widget. Here is an example:

Card(
 elevation:5, //Optional, this intensifies the shadow applied
 child: MyWidget()
)

Is it possible to change only the color of text shadow?

Yes, this can be accomplished using CSS variables!

As others have pointed out, an official text-shadow-color property does not exist. However, CSS will let you create your own "custom property"—aka CSS variable—and use it in your button's CSS.

Let's create a variable called --my-shadow-color. Any name will do, but it must start with --.

Create a CSS variable

To make it globally available so you can use it as a default, put it inside the special :root selector:

:root {
  --my-shadow-color: gray;
}

button {
  text-shadow: 1px 1px var(--my-shadow-color);
}

The shadow will now be gray by default. But you can override it for each different button class. Note that you can define (or redefine) CSS variables inside any selector—:root is just the most general. As with regular CSS properties, more specific selectors will trump less specific ones.

Override the variable for different selectors

You can now override the color for any specific selector. Let's create classes of .button-red and .button-blue to set the text-shadow color for our different buttons.

.button-blue {
  --my-shadow-color: blue;
}
.button-red {
  --my-shadow-color: red;
}

We can now control our shadow color by using the .button-blue and .button-red classes in our HTML:

<button class="button-blue">Blue</button>
<!-- ^ shadow will be blue -->

<button class="button-red">Red</button>
<!-- ^ shadow will be red -->

<button>Default</button>
<!-- ^ shadow will be gray -->

Is There a 'Box-Shadow-Color' Property