CODEWITHSUNDEEP
htmlcssweb
mkkhedawat
mkkhedawat

Reputation: 1717

How to remove border in radial gradient so that it can mix well?

I have radial gradient as below :

enter image description here

How to remove the final dark border so that it mix with background ?

( Wrinkles are okay, But final border line is annoying )

Basically I am trying to have a glow element in middle of plain background. Any alternative is also welcome :)

CSS

#rectangle {
  position: relative;
  width: 1280px;
  height: 480px;
  background-color: #112d44;
}
#rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  bottom : 0%;
  right: 0;
  left: -10%;
  width:1680px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgb(17, 67, 96) 0%, rgba(0, 0, 0, 0) 50%);
}

HTML

<div id="rectangle" ></div>

Pen can be found here : http://codepen.io/anon/pen/vNOLGx Please fork first.

Upvotes: 0

Views: 1461

Answers (2)

Madalina Taina
Madalina Taina

Reputation: 1978

I think it looks smooth if you use more colors, transparency and 'closest-side':

background:radial-gradient(ellipse closest-side, 
rgba(35, 80, 117, 0.27) 10%, 
rgba(25, 61, 90, 0.46) 25%, 
rgba(17, 45, 68, 0.66) 30%, 
rgba(17, 45, 68, 0.85) 10%, 
transparent 40%)

I hope it is what you need. http://codepen.io/anon/pen/qOdZxY

Upvotes: 0

George
George

Reputation: 36794

Have your gradient fade to the background colour, and hide any overflow so that your ::after pseudo element doesn't break out of its container:

#rectangle {
  position: relative;
  width: 1280px;
  height: 480px;
  background-color: #112d44;
  overflow: hidden;
}
#rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 30%;
  bottom : 0%;
  right: 0;
  left: 0%;
  width:1680px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgb(17, 67, 96) 0%, rgb(17, 45, 68) 50%);
}

CodePen

Upvotes: 1

Related Questions