Box-shadow is Black in Chrome but White in Firefox?

Question

Actually the problem is simple, my shadow is black in Google Chrome and white in Firefox, It should be black. And if you have different comments please do say them because I'm still a student.

This is my HTML code: (it is dutch but it is just so you can see the anarchy.)

<div class="rechts">
    <h2>IN DE SPOTLIGHTS</h2>
    <p>Zondag 13 oktober beginnen we met ons nieuwe jaar! We starten om 13u30 en iedereen is natuurlijk meer dan welkom! KSA Scherpenheuvel is ook te vinden op <a href="https://www.facebook.com/pages/KSA-Scherpenheuvel/1065425993472427?fref=ts" style="color: black">facebook</a>!</p>

    <h2>FOTOMOMENT</h2>
    <p><img src="images/groepsfoto.jpg" width="400px" alt="foto niet beschikbaar" /><br /> Groepsfotooooo!</p>

    <h2>EXTRA</h2>
    <p><a href="baby.html" style="color: black;">babysitter nodig</a></p>
</div>

my css code for div with class rechts:

.rechts{
    position:absolute;
    right:10px;
    top:500px;
    background-color:#4CAD5D;
    width: 450px;
    border-radius:4px ;
    box-shadow: 0 10px 7px #fff;
    -webkit-box-shadow: 0 10px 7px black;
    -moz-box-shadow: 0 10px 7px black;
    text-align: center;
}

I never use #000 or #fff, I just write black or white: no confusion possible. — frenchie, Nov 08 '15 at 01:21

score 5 · Accepted Answer · answered Nov 08 '15 at 01:18

You have the 'box-shadow' and then the same with vendor prefixes. The first box-shadow has white in it.

Change this:

.rechts {
    box-shadow: 0 10px 7px #fff;
    -webkit-box-shadow: 0 10px 7px black;
    -moz-box-shadow: 0 10px 7px black;
}

To this:

.rechts {
    -webkit-box-shadow: 0 10px 7px #000;
    -moz-box-shadow: 0 10px 7px #000;
    box-shadow: 0 10px 7px #000;
}

You can use black or #000, but I prefer to place the vendor-prefix free line at the end.

excuse me, I was editing the code at a wrong place (stupid me) thanks a lot :) — Dries Jans, Nov 08 '15 at 01:33

L84 · Answer 2 · 2015-11-08T01:34:14.120

1

It is a good practice to write your code with prefixes first then unprefixed next, IE:

-webkit-box-shadow: 0 10px 7px black;
-moz-box-shadow: 0 10px 7px black;
box-shadow: 0 10px 7px #fff;

The problem here is your unprefixed box-shadow is #fff which equals white. Some browsers (depending upon versions, etc.) will use the unprefixed version, even if a prefixed version comes after the unprefixed version.

Change it to box-shadow: 0 10px 7px #000; (or use black in place of #000) and you will be good.

edited Nov 08 '15 at 01:34

answered Nov 08 '15 at 01:18

L84

45,514
58
177
257

I've changed it all in black and the code with prefixes first – Dries Jans Nov 08 '15 at 01:26

Box-shadow is Black in Chrome but White in Firefox?

2 Answers2