Layered Gradients in elm-css

I am trying to make a nice looking back ground consisting of two linear gradients, one horizontal and one vertical, layered on top of each other. I can make a one gradient background like so:

backgroundImage (linearGradient2 toRight (stop <| hex "bb277755") (stop2 (hex "bb277700") (pct 100)) [])

but I don’t know how to layer 2 gradients in one background image (of course I can make a gradient in a different div but that seems like bad practice).

does anyone know how to layer background images?

If I understand correctly your request you could use the CSS background-blend-mode property: background-blend-mode - CSS: Cascading Style Sheets | MDN

…sets how an element’s background images should blend with each other and with the element’s background color.

So my suggestion would be to specify multiple gradients, one after another within a single backgroundImage property and then set the blend mode you need.

Or maybe just have some semi-opaque (using RGBA color values) gradients to begin with?

Ah, now I see the problem: backgroundImage Css - elm-css 18.0.0 seems to require a single value… not a list of possible images.

Is it your issue?

Yes, this is the problem I’m having.

Is recommend check out the updated fork Css - elm-css 3.0.0

Thanks, I’ll transition to it.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.