CODEWITHSUNDEEP
firefoxcssshadow
Syren
Syren

Reputation: 2051

Issue with background blending with shadow with CSS

I am trying to make an element with text that is basically a radial gradient. I thought I could do this by taking a round white container and then adding a white box shadow, but the color of the beginning of the shadow and the background color of the div don't match in chrome, and the border-radius property is causing a weird border in Firefox.

I'd love some input, I've created a codepen for this, but here is the code...

http://codepen.io/syren/pen/tcdBz

div.feature{
  background:#000;
  width:100%;
  height: 300px;
}

div.text{
  width: 300px;
  height: 300px;
  background: white;
  padding: 130px 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 160px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 50px 50px #fff;
  margin: 0 auto;
}

Thanks!

Upvotes: 1

Views: 231

Answers (1)

jotavejv
jotavejv

Reputation: 2086

Here's a fix/workaround:

div.text{
  width: 300px;
  height: 170px;
  background: white;
  padding: 130px 0 0;

  border:solid 1px white;
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px 30px #fff,0 0 50px 40px #fff;
  margin: 0 auto;
}

The buggy border has the color of the background, so now the box-shadow covers it

Updated Pen

Upvotes: 1

Related Questions