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


Tags: html,css,html5,css3,web

Problem :

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.



Solution :

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


    CSS Howto..

    How to center text based on only one of two merged cells ? html/css

    How to tell what in CSS files that is not used? [duplicate]

    How to resolve css incompabilities/differences between different versions of IE?

    Bootstrap with custom css how to align text vertically?

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

    How to make the background image responsive

    Why do the images move when clicked in html and css? How to prevent it? [closed]

    How to change css file of bx-slider, multiple sliders on a page [closed]

    CSS How to center link elements within a div

    How do I make a DIV tag stretch to the size of it's children?

    How to style a div to be a responsive square? [duplicate]

    how to apply css style only to homepage

    How to match a particular tag through css selectors where the class attribute contains spaces?

    How to create javascript or css fadeInDown on mouseover?

    How to get opaque text on div with transparency?

    how to use tinymce content.css in rails

    How to make website change its layout of image/text when the browser dimensions are changed?

    How combine multiple media destinations (screen, print) with width restriction?

    How to configure opacity based CSS overlay to not effect spacing of surrounding elements?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to make all input boxes ordered in a straight line? [closed]

    Search type links in Yahoo - how to implement similar behaviour

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to select a css class as selected dynamically in mvc

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    How do I tell CSS to recalculate :first-of-type after DOM dynamically changes?

    How to use CSS to ensure items remain offscreen even if window is resized?

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    How to fix width of DIV that contains floated elements?

    CSS How to display a single icon out of a matrix for a list item