在 CSS 中重现复杂的渐变

Question

我正尝试在 CSS 中重现（尽可能接近）我见过的渐变。

我设法接近它，但我不能做得更好。

这是渐变图像： Gradient to reproduce

这是我的 HTML / CSS 代码：

*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {display: flex; align-items: center; justify-content: center;}

.logo {
    background:
        radial-gradient(circle farthest-corner at 10% 90%, #FFF200, transparent 50%),
        radial-gradient(circle farthest-corner at 10% 130%, #FFF200, transparent 50%),
        radial-gradient(circle farthest-corner at 150% 150%, #ed4444, transparent),
        radial-gradient(circle farthest-corner at 170% 170%, #ed4444, transparent),
        linear-gradient(#627AFF 40%, transparent);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    position: relative;
    width: 1em;
}

.logo:before {
    content: "D";
    color: white;
    position: absolute;
    left: 67px;
    top: 17px;
    font-size: 175px;
}

<div class='logo'></div>

提前致谢，

Answer 1

尽我所能，希望对你有帮助。祝你好运，

.logo {
  background: 
  radial-gradient(circle farthest-side at 50% 180%, white 15%, transparent 20%),
  radial-gradient(closest-corner at 121% 84%, #ef5d5d 190%, transparent 307%),
  radial-gradient(closest-side at 40% 77%, #fff64d 76%, transparent 185%),
  linear-gradient(#9933ff 10%, transparent);
  border-radius: 50%;
  font-size: 250px;
  height: 1em;
  position: relative;
  width: 1em;
}

.logo:before {
font-family: 'Brush Script MT', cursive;
  content: "D";
  color: white;
  position: absolute;
  left: 67px;
  top: 17px;
  font-size: 175px;
}

<div class='logo'></div>

在 CSS 中重现复杂的渐变

Reproduce a complex gradient in CSS

html

css

gradient