A faded bluish circle appears on a black background-CodePudding

My goal is to create a faded blue circle on black background.

However, there is a white square surrounding the circle, and it doesn't look good.

What can I do to get rid of this white background?

body {
  background-color: black;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: blue;
}

.circle:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}

<div > </div>

CodePudding user response：

One way is to fade away with black instead of white.

body{
   background-color:black;
}

.circle {
    border-radius: 50%;
  width:200px;
  height:200px;
  background-color:blue;
  
}

.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
  background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);

}

<div > </div>

CodePudding user response：

You seems to overcomplicate a simple task:

body {
  background-color: black;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(farthest-side,blue,#0000);
}

<div > </div>