css Question posted in
Some basic documentation can be found here.

Complex gradient in css

I have a gradient I’m trying to make in CSS. I added the Figma settings and an image of the gradient.
This is the code I tried and just got a circle:

background: radial-gradient(circle, rgba(118, 60, 172, 1.00) 0%, rgba(50, 15, 133, 0) 100%);

body {
  background-color: #000;
}
.circle {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(118, 60, 172, 1.00) 0%, rgba(50, 15, 133, 0) 100%);
}
<div class="circle"></div>

figma settings
figma object

Tags:

2

Answers


  1. 0

    Just leave a little space for the radial gradient, so it doesn’t end at 100%, but sooner.

    body {
  background-color: #000;
}
.circle {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(118, 60, 172, 1.00) 0%,
    rgba(50, 15, 133, 0) 70%
  );
}
    <div class="circle"></div>
    Login or Signup to reply.
  2. 0

    Don’t use circle but define the radii values to be equal to 50%. You can also omit the percentage of the color stops.

    body {
  background-color: #000;
}
.circle {
  width: 300px;
  aspect-ratio:1;
  background: radial-gradient(50% 50%, rgb(118 60 172), #0000);
}
    <div class="circle"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search