How to Control Height of Ellipse in Radial Gradient

How to control height of ellipse in radial gradient

use values instead of ellipsis

body {
  background: radial-gradient(220px 80px at top center, green, yellow);
  margin: 0;
  height: 100vh;
}

how to change height of ellipse in radial gradient in css for background property

Use a div with overflow set to hidden, and a div inside of it absolutely positioned with a fixed height.

#outer {  height: 100px;  overflow: hidden;  position: relative;  width: 200px;}#inner {  background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);  bottom: 0;  height: 150px;  position: absolute;  width: 200px;}

<div id="outer">  <div id="inner"></div></div>

Restrict size of radial gradient on an element

You can constrain the background image size using background-size and background-repeat properties.

.Content {  border-top: 10px solid #666666;  background: #5E88B2;  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);  background-size: 100% 100px;  background-repeat: no-repeat;}.MainContent {  background-color: #ffffff;  border-radius: 5px;  margin-top: 3%;  margin-left: auto;  margin-right: auto;  padding-left: 15px;  padding-right: 15px;  clear: both;  display: table;  width: 300px;}

<section style="background-color: #ffffff;">This is header</section><section id="OuterSection" class="container-fluid Content">  <section class="container MainContent">    <!-- Main Markup -->    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>  </section></section><section style="background-color: #eeeeee;">This is footer</section>

svg - how to draw ellipse gradient?

To get the image as in the first screenshot, you need to apply a mask.

The mask is made up of two rectangles:
The first rectangle fill ="black" cuts everything

The second rectangle fill ="white" leaves the desired part with an ellipse

<mask  id="mask_ellipse_7" > 
    <rect width="100%" height="100%" fill="black" />
       <rect x="138" y="455" width="355" height="60" stroke="red" fill="white" />
</mask>

Below is the full code:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Static Template</title>  </head>  <body>    <svg      tabindex="0"      focusable="true"      shape-rendering="optimizeSpeed"      viewBox="0 400 640 545"      style="border: 1px solid blue; width: 100%; height: 100%;"    >      <g id="text_7" style="mask:url(#mask_ellipse_7)">        <rect          x="138.734375"          y="455.703125"          width="355"          height="60"    fill="black"                  ></rect>        <ellipse          cx="292.000183"          cy="80.999115"          rx="116.99969500000003"          ry="51.003084999999984"          transform="matrix(1,0,0,1,65,400)"          style="fill:url('#bg-ellipse-gradient_7'); "        ></ellipse>        <text font-size="12" transform="matrix(1,0,0,1,65,400)">          <tspan x="75" y="67" dy="0" fill="#FF0000" fill-opacity="1">            Lorep ipsum - radial gradient          </tspan>        </text>  </g>        <defs>          <radialGradient            id="bg-radial-gradient_7"            gradientTransform="matrix(1,0,0,1,65,400)"            gradientUnits="userSpaceOnUse"            fx="304"            fy="49"            cx="292.000183"            cy="80.999115"            r="127.63323747993802"          >            <stop              stop-color="#00FFFF"              stop-opacity="1"              offset="0.000000"            ></stop>            <stop              stop-color="#FFFF00"              stop-opacity="1"              offset="0.500000"            ></stop>            <stop              stop-color="#000000"              stop-opacity="1"              offset="1.000000"            ></stop>          </radialGradient>        </defs>        <defs>          <radialGradient            id="bg-ellipse-gradient_7"            fx="74.32765053294222%"            fy="37.120593444654716%"          >            <stop              stop-color="#00FFFF"              stop-opacity="1"              offset="0.000000"            ></stop>            <stop              stop-color="#FFFF00"              stop-opacity="1"              offset="0.500000"            ></stop>            <stop              stop-color="#000000"              stop-opacity="1"              offset="1.000000"            ></stop>          </radialGradient>        </defs>        <defs>          <mask            id="mask_ellipse_7" >    <rect width="100%" height="100%" fill="black" />            <rect x="138" y="455" width="355" height="60" stroke="red" fill="white" />          </mask>        </defs>             </svg>  </body></html>

Radial Gradient ellipse doesnt work properly

adjust your code like below:

html {  min-height:100%;  background-image: radial-gradient(150% 150% at bottom center, white, lightgrey,  #1b1b2e, #1b1b2e);}

smooth css radial-gradient cutout

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/

Radial-gradient doesn’t create perfect circles

There are a few solutions to this, discussed in this Medium article by
Mandy Michael.

One elegant one is to use calc to add a single pixel of the second color, as seen below, which renders enough blur to offset the jaggedness.

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink calc(50% + 1px));
}

<div></div>

How to move circular radial gradient slightly to top?

Define the position of gradient using at as follows:

radial-gradient(115px 102px at center top, #90aed0, #516e8e)

You can use keywords, px or % values to define position of the shape:

.box-2 {  background: radial-gradient(115px 102px at center top, #90aed0, #516e8e);}
.box {  line-height: 100px;    text-align: center;  color: #fff;    width: 100%;}

<p class="box box-2">text</p>

Radial gradiant, split a section in two CSS ellipse shape

Not sure if this is the result you want but try using the clip-path property.

.super {
  background-color: red;
  height: 150px;
  clip-path: circle(50% at 89% 54%);
}

<section class="super">
   <div class="nice">
   </div>
 </section>

How do I shrink the size of the radial gradient in Flutter?

I figured it out, I just added radius: 0.4,

How to Control Height of Ellipse in Radial Gradient