Modify shadow color of the ".hoverable" class in Materialize.css

Question

I'm trying to change the shadow color of the .hoverable class in the Materialize.css framework, as the current color is not visible on dark backgrounds.

modifying box-shadow and text-shadow properties didn't worked.

HTML:

<div class="col s12 m3">
        <div class="card hoverable">
            <div class="image">
            <img src=# alt='image' />
            </div>
            <div class="card-content">
                <p class='card-name'>...</p>
                <p class='card-mail'>...</p>
                <p class='card-location'>...</p>
            </div>
        </div>
    </div>

CSS:

.card {
    background-image: linear-gradient(181.8322969733734deg, rgba(13, 33, 130,1) -2.5876288659793687%,rgba(56, 203, 229,1) 84.42268041237114%,rgba(57, 204, 230,1) 84.42268041237114%);
}

.card-name {
    font-weight: bold;
    color: white;
}

Answer 1

For changing the shadow color of a .hoverable, you should override a box-shadow for both .card and .hoverable class.

.card.hoverable {
    box-shadow: 0 2px 2px 0 blue, 0 3px 1px -2px blue, 0 1px 5px 0 blue;
}

And to add your desired style for hover:

.card.hoverable:hover {
    box-shadow: 2px 4px 5px 0 blue, 2px 5px 3px -3px blue, 2px 5px 10px 0 blue;
}

You can use cssmatic box-shadow generator to create your desired box shadow.