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


Tags: css,css3,shadow,css-shapes,radial-gradients

Problem :

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>


    CSS Howto..

    How to make all elements in one line?

    How to change the color of each instance of a word in an html table with css?

    How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub?

    How to set image in horizontal center of DIV to fill page width?

    how to change properties of a parent div on hover of child div

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    How to put a diagonal line over a textbox in CSS?

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    Creating a calendar control using CSS: How to auto layout events

    how to overrule prior css

    How to use custom css with bootstrap css

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How can i overwrite media queries defined in Bootstrap CSS

    How to pass an array from controller to PHP file that contains CSS before the view is loaded?

    How to place buttons next to each other using css Bootstrap

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    How to select a range of elements in repeated pattern

    how to give no-more-use of css in jquery for css params

    How can I get these two widgets to align horizontally using CSS selectors?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    How to apply IE11 specific css [closed]

    How to center a div tag in a html page without being affected by zooming

    How do I append jumping dots to a text in html and css

    Show required asterisk star after the text?

    How to spread a div to cover available space in a parent container?

    css - how to stretch a background image across the entire window

    How do I hide the parent of a nested list while keeping the nested list visible?

    How to position div so that it renders outside container

    css animation how to get the ball to bounce