css - 如何创建此渐变？

Question

你能告诉我如何创建这个径向渐变吗？

我当前的 CSS:

background: radial-gradient(closest-corner, #b0ff9f 40%,
            #9dfa89 40%, #9dfa89 50%, #7af16a 50%, #7af16a 60%,
            #60ea54 60%, #60ea54 70%, #00b4ff 70%, #00b4ff 100%);

Answer 1

你很接近。您需要微调半径和位置，而不是使用固定大小的关键字。你剩下的一切都很好。

body {margin:0}
div {background: radial-gradient(ellipse 80% 100% at center bottom,
     #b0ff9f 40%, #9dfa89 40%, #9dfa89 50%, #7af16a 50%, #7af16a 60%,
     #60ea54 60%, #60ea54 70%, #00b4ff 70%, #00b4ff 100%);}

<div style="height:100px"></div>