Using shapes for gradients in css

Question

I'm trying to get better at CSS, I asked my friend to draw a website in photoshop, and she threw me a stumper. This is the background I'm trying to replicate:

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;
    --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: '';
    }

<body>
    <div id="circleBackground"></div>
</body>

which gives me this:

I'm clearly barking up the wrong tree. The shapes aren't even close. The gradient is not happening either.

Is it possible to replicate this gradient in css? If it is, what should I look at to achieve the desired result?

Html is simply <div id="circleBackground"></div> @JithinB. The filters get screwed up because of the css contrast filter. — user125661
– user125661, Commented May 17, 2020 at 13:59
Right on both counts @user125661 - reducing the contrast kills my circles, but at least it's not teal anymore. — Billdr
– Billdr, Commented May 17, 2020 at 14:11
P.S. This is purely academic, I think. The 'real world' answer is to contact the designer and get svgs for their stupid complicated patterns. — Billdr
– Billdr, Commented May 17, 2020 at 17:32

theFrontEndDev · Accepted Answer · 2020-05-17 14:17:07Z

1

Try this , I guess it should look almost simiar to the image you have posted:

#circleBackground {
    position: relative;
    height: 90vh;
    box-shadow: 2px 2px 5px;
    background: linear-gradient(to right, #3278f6, #80cbf9 );
    filter: contrast(7);
    --mask: linear-gradient(red, #{rgba(#000, .45)});
}

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

answered May 17, 2020 at 14:17

theFrontEndDev

9832 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Billdr Over a year ago

Thank you, with a few tweaks (turning the contrast off) it does get pretty close. Except with the contrast off it looks like squares instead of circles.

theFrontEndDev Over a year ago

Welcome, Happy to help you. Anything more I can do to make it better ?

Billdr Over a year ago

Well, choosing between colors or not-quite-right shapes is not the goal. I think this approach of making a circle background is wrong for this use case - probably why the original code was in black and white.

Collectives™ on Stack Overflow

Using shapes for gradients in css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related