Search code examples
cssshadowcss-shapesradial-gradients

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

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

enter image description here

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.

Solution

  • 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>