在CSS中使用形状进行渐变

由 发布于 css
 收藏

我试图提高CSS的质量，我问我的朋友在photoshop中画了一个网站，她把我丢了个树桩。这是我要复制的背景：

A gradient using shrinking circles

I found a sample on making a Pure CSS Halftone Pattern, and have adapted it as such:

#circleBackground {
    z-index: 0;
    position: relative;
    margin: -10px;
    height: 100vh;
    background: #7ecafb;
    filter: contrast(350%);
    --mask: linear-gradient(to bottom right, #7ecafb, rgba(0,0,0, 0.45));
}

    #circleBackground::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: radial-gradient(#4f87d0, #7ecafb) 0 0/1em 1em space;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        content: '';
    }

which gives me this: A teal monstrosity that looks nothing like the desired results

我显然在吠错树。我的颜色搞砸了（我已经用hex，rgba和hcl创建了它们-总是出错了），但是形状还是不合适。

是否可以在CSS中复制此渐变？如果是的话，我应该怎样看才能达到预期的效果？

评论