Fading color in using radial-gradient-CodePudding

I am attempting to add a radial-gradient background to my header. I am using radial-gradient to add a curve effect to the bottom of the header. I would like to have an effect where the color from the top to the header is lighter which gets darker farther down the container. Currently, my header has the curve I desire but the color shown is 1 solid color instead of a fade.

Can I achieve this look using radial-gradient?

Photo of the desired look:

Code snippet of CSS:

<html>
  <head>
<style>
  #container {
    height: 200px;
    width: 400px;
    background: radial-gradient(100% 95% at top,#E8F3F9 100%,#0000 );
    border: 1px dotted wheat;
  }
</style>
  </head>
  <body>
<div id="container"></div>
  </body>
</html>

I've attempted to add a lighter hex color #fefefe to the at top piece of the background CSS but that ended up turning the entire header 1 color.

 background: radial-gradient(#fefefe 100% 95% at top,#E8F3F9 100%,#0000 );

CodePudding user response：

move the gradient to mask then use another one as background:

#container {
  height: 200px;
  width: 400px;
  -webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
          mask: radial-gradient(100% 95% at top, #000 100%, #0000);
  background: linear-gradient(#0000,#E8F3F9);
}

<div id="container"></div>

CodePudding user response：

Basically you are trying to create a hard line using gradients. Here you can find some uses of gradients including hard lines Using CSS gradients.

To create a hard line you have to define the same position for two colors.

In this case it look like the following code.

<html>
  <head>
  <style>
    #container {
      height: 200px;
      width: 400px;
      background: radial-gradient(100% 95% at top,#ffffff 5%, #E8F3F9 100%,#ffffff 100% );
      border: 1px dotted wheat;
    }
  </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

where the #E8F3F9 and #ffffff are at the 100% position.

I added #ffffff 5% to create the top light effect.