CODEWITHSUNDEEP
cssradial-gradients
SoulieBaby
SoulieBaby

Reputation: 5471

smooth css radial-gradient cutout

Hi all I'm trying to use CSS to create a cut-out effect, however it's pretty grainy. So I've created a fiddle of how it looks:

http://jsfiddle.net/n0p25hq8/5/

My CSS I'm using for the cut out effect is:

section.services .item-2 .text::before{
content:'';
position:absolute;
width:100%;
height:2em;
left:0;
right:0;
top:-2em;
margin:0 auto;
background:radial-gradient(ellipse 60% 2em at 50% 0,transparent 100%,#fff 0);
z-index:-1
}

If someone could help me make it smooth, that'd be great!

Upvotes: 0

Views: 1234

Answers (2)

Carol McKay
Carol McKay

Reputation: 2424

Instead of a radial background on the ::before, go with a border radius with a bit of repositioning:

For item 2 - pre-existing css minus the radial background:

section.services .item-2 .text::before{
   content:'';
   position:absolute;
   width:100%;
   height:2em;
   left:0;right:0;top:-2em;margin:0 auto;
/* background:radial-gradient(ellipse 60% 2em at 50% 0, transparent 100%,#fff 0); */
z-index:-1}

give the item 2 a background of white for the ::before background of black to sit against and reduce height to line it up properly with items 1 and 3:

section.services .item-2{
  background: white;
  box-sizing:border-box;
  height:163px;
}

hitch the text up to be level with the text in items 1 and 3:

section.services .item-2 .text{
  padding-top:1px;
}

bottom border radius, wider than 100% and shunted left to create the correct curvature:

section.services .item-2 .text::before{
  content:'';
  position:absolute;
  top:-4em;
  transform:translateX(-5%);
  width:110%;
  height:2em;left:0;right:0;margin:0 auto;
  display:block;
  background:#000;
  border-radius: 0 0 100% 100%;
}

Updated jsfiddle: http://jsfiddle.net/n0p25hq8/7/

Upvotes: 1

Ralph Najm
Ralph Najm

Reputation: 239

One way to solve this issue would be to increase the blur in the gradient, so we have this applied on .text:before

background: radial-gradient(ellipse 60% 2em at 50% 0,transparent 98%, #fff 100%);

Here is the fiddle, you can play around with the transparent percent to increase/decrease smoothness.

Upvotes: 1

Related Questions