Search code examples
csscss-shapes

increasing size of circle in a radial gradient in CSS3

I have the following CSS rules for my gradient:

background-image: radial-gradient(circle at top right, rgb(237, 241, 254), rgb(195, 253, 237));

I was just wondering if I could somehow increase the size of the circle that contains the first colour. It seems that the colour is only restricted to a small area. Is this possible at all?

Cheers

enter image description here

Solution

  • I might found a solution for you, please see both snippets:

    1st snippet just for comparison:

    div {
  background: rgb(173, 217, 228);
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(75%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height: 400px
}
    <div></div>

    2nd snippet with a bigger circle on the right/left - top/bottom

    div {
  background: rgb(173, 217, 228);
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(60%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height:400px;
}
    <div></div>

    The difference from 1st to 2nd snippet is the location:

    • 1st has 75% or color-stop(75%
    • 2nd has 60% or color-stop(60%