Issue with background blending with shadow with CSS

Question

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!

Nice one .. the border in firefox .. nice one.

Milche Patern
– Milche Patern

2013-02-21 23:59:12 +00:00
Commented Feb 21, 2013 at 23:59 — Milche Patern
– Milche Patern, Commented Feb 21, 2013 at 23:59

jotavejv · Accepted Answer · 2013-02-22 14:54:53Z

1

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

edited Feb 22, 2013 at 14:54

answered Feb 22, 2013 at 0:49

jotavejv

2,1163 gold badges17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with background blending with shadow with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related