背景中的多重梯度和径向渐变

Question

这就是我想要实现的

是否可以使用 CSS 渐变得到类似的结果？我在玩 radiant 但我无法创造类似的东西。（这是我的一些尝试）。

background-image: radial-gradient( circle at top right, #016CB4, black 20%, transparent 40% ), radial-gradient( circle at bottom left, #016CB4, BLACK 20%, transparent 40% );

和

background: radial-gradient(circle, #016CB4, black),radial-gradient(circle, #016CB4, black),radial-gradient(circle, white, #016CB4),radial-gradient(circle, #016CB4, black);

Answer 1

为了达到你想要的结果，你应该使用坐标而不是，例如 top right

看起来像这样radial-gradient(circle at 0% 0%, #2296e5, transparent 30%) 第一个 0% 是水平位置，第二个是垂直位置。所以 0% 0% 是左上角，100% 100% 是右下角。

然后只需将值随机化并添加足够的梯度，直到您满意为止。

我建议为此使用 SCSS 循环。

这是它的样子

@function noise($color) {
  $val: radial-gradient(circle at 0% 0%, $color, transparent 30%);
  @for $i from 1 through 50 {
    $color2: darken($color, $i*0.9);
    $val: #{$val}, radial-gradient(circle at random(100) + #{'%'} random(100) + #{'%'}, #{$color2}, transparent 30%);
  }
  @return $val;
}

@mixin addnoise($color) {
  background: noise($color);
}

div {
  width: 100vw;
  height: 100vh;
  @include addnoise(#2296e5);
}

编译为：

div {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 0% 0%, #2296e5, transparent 30%), radial-gradient(circle at 19% 51%, #1e94e5, transparent 30%), radial-gradient(circle at 59% 93%, #1b92e3, transparent 30%), radial-gradient(circle at 56% 94%, #1a8fdf, transparent 30%), radial-gradient(circle at 26% 90%, #1a8ddb, transparent 30%), radial-gradient(circle at 6% 65%, #198ad7, transparent 30%), radial-gradient(circle at 5% 100%, #1987d3, transparent 30%), radial-gradient(circle at 93% 21%, #1885cf, transparent 30%), radial-gradient(circle at 6% 68%, #1882ca, transparent 30%), radial-gradient(circle at 97% 33%, #177fc6, transparent 30%), radial-gradient(circle at 43% 53%, #177dc2, transparent 30%), radial-gradient(circle at 30% 60%, #167abe, transparent 30%), radial-gradient(circle at 68% 43%, #1678ba, transparent 30%), radial-gradient(circle at 5% 49%, #1575b6, transparent 30%), radial-gradient(circle at 99% 21%, #1572b2, transparent 30%), radial-gradient(circle at 92% 60%, #1470ae, transparent 30%), radial-gradient(circle at 85% 30%, #146daa, transparent 30%), radial-gradient(circle at 91% 6%, #136aa5, transparent 30%), radial-gradient(circle at 37% 9%, #1368a1, transparent 30%), radial-gradient(circle at 48% 66%, #13659d, transparent 30%), radial-gradient(circle at 82% 62%, #126299, transparent 30%), radial-gradient(circle at 15% 80%, #126095, transparent 30%), radial-gradient(circle at 20% 92%, #115d91, transparent 30%), radial-gradient(circle at 49% 79%, #115b8d, transparent 30%), radial-gradient(circle at 81% 70%, #105889, transparent 30%), radial-gradient(circle at 16% 63%, #105585, transparent 30%), radial-gradient(circle at 32% 28%, #0f5381, transparent 30%), radial-gradient(circle at 8% 6%, #0f507c, transparent 30%), radial-gradient(circle at 77% 39%, #0e4d78, transparent 30%), radial-gradient(circle at 81% 20%, #0e4b74, transparent 30%), radial-gradient(circle at 87% 40%, #0d4870, transparent 30%), radial-gradient(circle at 18% 76%, #0d456c, transparent 30%), radial-gradient(circle at 61% 45%, #0c4368, transparent 30%), radial-gradient(circle at 20% 22%, #0c4064, transparent 30%), radial-gradient(circle at 39% 52%, #0b3d60, transparent 30%), radial-gradient(circle at 44% 37%, #0b3b5c, transparent 30%), radial-gradient(circle at 3% 59%, #0a3857, transparent 30%), radial-gradient(circle at 58% 20%, #0a3653, transparent 30%), radial-gradient(circle at 64% 37%, #09334f, transparent 30%), radial-gradient(circle at 55% 12%, #09304b, transparent 30%), radial-gradient(circle at 52% 36%, #082e47, transparent 30%), radial-gradient(circle at 3% 75%, #082b43, transparent 30%), radial-gradient(circle at 92% 94%, #07283f, transparent 30%), radial-gradient(circle at 37% 96%, #07263b, transparent 30%), radial-gradient(circle at 66% 92%, #062337, transparent 30%), radial-gradient(circle at 43% 2%, #062033, transparent 30%), radial-gradient(circle at 69% 81%, #051e2e, transparent 30%), radial-gradient(circle at 51% 68%, #051b2a, transparent 30%), radial-gradient(circle at 99% 15%, #041926, transparent 30%), radial-gradient(circle at 17% 85%, #041622, transparent 30%), radial-gradient(circle at 72% 69%, #04131e, transparent 30%);
}

<div></div>

背景中的多重梯度和径向渐变

Multiple grandients and radial gradient in background

html

css

gradient