Background transition with gradient

Asked

Viewed 222 times

1

As far as I know, css does not support gradient backgrounds transition, but supports "flat" color transition, for example (background-color:#fff)

How this effect was applied here, then? https://stripe.com/

I was able to reproduce the effect by placing one of the colors of the transparent gradient, and a background of a color just behind, thus transitioned the background color behind, but the effect is not the same.

I tried to understand using the developer tools, unsuccessfully.

html css

1 answer

1


Yeah, like you say, do transition with gradient not possible yet with CSS.

On this site what they have are different Divs for each background, all with

header.hero div.backgrounds>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    opacity: 0;

and then with CSS classes activate one by one by making opacity.

Here you can see all the Ivs: https://jsfiddle.net/7nv4dxym/

Here you can see them change: https://jsfiddle.net/cLaxoz7t/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.