How to add shadow to reverse c radial gradient only at the edges?

Question

I am new to this topic and have not found anywhere how to apply shadow to the reverse C type corners only.

Below is the link of Example image for which I am trying to add shadow only to the corners

Below is the code which I have used to achieve this reverse rounded corner:

CSS Code:

div {
  background-color: #a9a8a8;
  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background: -o-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -o-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #f7f6f6 15px);
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 500px;
}

<div></div>

So now I want to add shadow effect only to the rounded corners of the dark grey section. I want to illustrate the effect like the light grey is come on top of the grey.

Could you add some HTML in your snippet so it does indeed illustrate your problem? — Kaiido, Aug 27 '15 at 05:45

Harry · Accepted Answer · 2015-08-27T08:07:57.457

Since you are already using a radial-gradient to create the border corner scoop shape, all that is needed is to add an extra color-stop position in between to produce the shadow effect.

In the below snippet, we use the following gradient (for each corner):

radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px)

This gradient can be interpreted as follows:

The color of the radial gradient is rgba(204, 0, 0, 0) upto 100px radius from the center of the circle. The color is a transparent color and produces the effect of a reverse C cut (or a scoop).
From the 100px radius to 104px radius, the color gradually changes from rgba(204, 0, 0, 0) to #AAA (greyish color) and this produces a shadow like effect. You can change the color of the shadow by changing this color value.
Between 104px and 105px radius, color of the gradient changes from #AAA to #f7f6f6 which makes it look the color is changing smoothly instead of a hard-stop.

div {
  background: -moz-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -moz-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 100px, #AAA 104px, #f7f6f6 105px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 500px;
}

<div></div>

If you want to produce an output like in the image provided in comments, have a look at the below snippet. The working of this snippet is the same as the one explained above:

div {
  background: -moz-radial-gradient(0 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(100% 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(100% 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -moz-radial-gradient(0 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background: -webkit-radial-gradient(0 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(100% 100%, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(100% 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), -webkit-radial-gradient(0 0, circle, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background: radial-gradient(circle at 0 100%, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 100% 100%, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 100% 0, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px), radial-gradient(circle at 0 0, rgb(168, 168, 168) 100px, rgb(139, 139, 139) 102px, rgb(139, 139, 139) 106px, rgb(246, 246, 246) 106px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 300px;
  width: 600px;
}

<div></div>

Thanks Harry, Very close to what I want, only thing is is we need to get the shadow more better. http://s17.postimg.org/k9jxodm4v/Screen_Shot_2015_08_27_at_12_46_28_pm.png check this image after implementing the code. — Shirish S C, Aug 27 '15 at 07:43
@ShirishSC: That is reasonably simplet and requires only a small tweak. Refer to the second snippet in my answer. — Harry, Aug 27 '15 at 08:08

score 0 · Answer 2 · answered Aug 27 '15 at 10:31

My suggestion is to use 4 corner elements.
All positioned absolute to there relative container.
And with a box-shadow: 0px 0px |amount-of-blur|length-of-shaodw| color
I choose to go with box-shadow: 0px 0px 60px 50px black

body {
  background-color: #222;
}
.corner-shadow {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: white;
  overflow: hidden;
}
.corner-shadow .corner {
  position: absolute;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  box-shadow: 0px 0px 60px 50px black;
}
.corner.top {
  top: -2px;
}
.corner.left {
  left: -2px;
}
.corner.right {
  right: -2px;
}
.corner.bottom {
  bottom: -2px;
}

<div class="corner-shadow">
  <div class="corner top left"></div>
  <div class="corner top right"></div>
  <div class="corner bottom left"></div>
  <div class="corner bottom right"></div>
</div>

I want to achieve with only one div as I want to integrate in Visual Builder of my WordPress website. I think the first solution works for me. — Shirish S C, Aug 27 '15 at 17:32

How to add shadow to reverse c radial gradient only at the edges?

2 Answers2