Css 创建带模糊的圆形渐变

Question

如何创建 CSS 类似于扬声器 hompod 中的渐变？

你能给我一些建议吗？

.div {
    background: linear-gradient(217deg, #16446c, rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, #006867, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #62265d, rgba(0, 0, 255, 0) 70.71%);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    width: 1em;
    filter: blur(2px);
}

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

编辑：

.div {
    background: conic-gradient(from 180deg at 50% 50%, #00FFC2 0deg, #00F0FF 120.07deg, #0077FF 179.52deg, #FF0099 241.65deg, #0470E5 299.6deg, #00FFC2 360deg);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    width: 1em;
    filter: blur(32px);
}

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

Answer 1

我认为您的作品在视觉上与原始图像非常接近。由于您没有提到您的 homepod 娱乐中缺少什么，我只是尽力模仿图像。您可以更改颜色选择和弧角以获得更好的结果。我的方法是将球体分成馅饼。每个馅饼都有不同的颜色。由于图像模糊，我的肉眼无法分辨有多少纯色。我大概选了4个。

球体的中心看起来更亮，所以我将 radial-gradient 应用于饼图。我将中心设置为白色，并在渐变的 50% 处开始呈现独特的颜色。这是应用模糊之前的图像。

这是最终结果

.background {
  width: 400px;
  height: 400px;
  background-color: black;
  padding: 80px;
  position: relative;
}

.background .pie {
  width: 30%;
  height: 30%;
  background: white;
  border-top-left-radius: 100%;
  position: absolute;
  transform-origin: bottom right;
  filter: blur(40px);
}

.background .pie.wineberry {
  transform: rotate(81deg);
  background: radial-gradient(circle at bottom right, white, #663a6d 40%);
}

.background .pie.cello {
  transform: rotate(116deg);
  background: radial-gradient(circle at bottom right, white, #24425e 40%);
}

.background .pie.greenpea {
  transform: rotate(202deg);
  background: radial-gradient(circle at bottom right, white, #18665c 40%);
}

.background .pie.greenpea2 {
  transform: rotate(287deg);
}

.background .pie.astronaut {
  transform: rotate(13deg);
  background: radial-gradient(circle at bottom right, white, #345a7f 40%);
}

<div class="background">
  <div class="pie astronaut"> </div>
  <div class="pie greenpea"> </div>
  <div class="pie greenpea greenpea2"> </div>
  <div class="pie cello"> </div>
  <div class="pie wineberry"> </div>
</div>

编辑于 2022 年 4 月 8 日

因为@Paul 更喜欢单元素解决方案。我更新答案。感谢@cloned 的圆锥渐变想法。

最终结果由2 gradient background实现。首先 radial-gradient 模仿中心较亮的区域。其次 conic-gradient 代表 purple-blue 色轮。颜色选择保持不变。

.background {
  width: 400px;
  height: 400px;
  background-color: black;
  padding: 80px;
  position: relative;
}

.orb {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  filter: blur(25px);
  background: radial-gradient(circle at center, white, transparent 40%), conic-gradient(from 45deg, #663a6d 52deg, #24425e 65deg, #18665c 120deg 307deg, #345a7f 353deg);
}

<div class="background">
  <div class="orb"> </div>

</div>

Css 创建带模糊的圆形渐变

Css create a circular gradient with blur

html

css

gradient