Hi Friends, how do we recreate a Figma Style like this in Kobweb? Here, I want to create a `linear-g...

# kobweb

[Shubham Singh]

Hi Friends, how do we recreate a Figma Style like this in Kobweb?
Here, I want to create a linear-gradient that is made up of a color and another linear-gradient.
Basically, the child linear-gradient is lightened by mixing a pinch of white with it.

[Meet]

i am not sure my idea may be help full. try it using html, css after this site open it for css to modifier.

https://opletter.github.io/css2kobweb/

[Shubham Singh]

Thanks Meet, I'll check it out

[David Herman]

css2kobweb is great and should help, although please file issues if you find something that doesn't convert correctly. Thank you @Meet for linking it!

Linear gradients come from the background property (https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

Here's an example of me using it in my blog site: https://github.com/bitspittle/bitspittle.dev/blob/c4b48f08a4c014da80911562979bea4a[…]tspittle/site/components/widgets/blog/koverbadge/GradientBar.kt

[Shubham Singh]

Thanks David
A simple gradient is easy to create in Kobweb (thanks to its simple APIs) 👌

But I haven't been able to find a way to mix a color with a gradient yet. It's probably a CSS limitation only, because Kobweb exposes access to all CSS functions/properties.

In that case, maybe I'll just create a normal gradient and write an overlay composable for it.

Still, thanks to both Meet and David for helping out.

So far, I'm enjoying the Android-like APIs on Kobweb 🙌 it's allowing me to write the web app quicker than I anticipated 👏

[David Herman]

I really appreciate you saying it's allowing you to write the app faster than you anticipated!

What do you mean by "mix a color with a gradient"?

[Shubham Singh]

If you see in the image above, the bottom item is a gradient in itself (made of red and pink)

But the top item, the one that looks white, is put above the red-pink gradient to make it look lighter

If I remove that white layer, the gradient looks much darker

So I was wondering if creating something like that is possible purely using CSS properties to avoid having to write 2 separate composables (i.e. one for gradient and one for the white overlay)

[David Herman]

Ah I see, like a blending

[Shubham Singh]

Exactly

[David Herman]

I'm looking into background stuff right now. Meanwhile, isn't there a mode where Figma shares the HTML needed to generate something?

[Shubham Singh]

I think it should be there in dev mode
I'm not sure the Figma file I have allows it, but I'll check and let you know in a while

[David Herman]

So there is a way to specify a background with a base color and a linear gradient, but I can't seem to set a blend mode that actually lightens in that much

[David Herman]

I think the easiest think to do is something like this (the two composables approach, which you may have already stumbled upon):

Box {
    val size = 200.px
    Box(
        Modifier
            .size(size)
            .backgroundImage(
                linearGradient(LinearGradient.Direction.ToRight, Colors.Blue, Colors.Red)
            )
    )
    Box(
        Modifier
            .size(size)
            .backgroundColor(Colors.White.copyf(alpha = 0.4f))
    )
}

[David Herman]

There, the outer box is for stacking. The inner boxes are arbitrary, something to create a background color on. (A Div would have also been fine)

[David Herman]

You can look up blend modes and play with this idea:

Box(Modifier
    .size(200.px)
    .background(
        Colors.Green,
        Background.of(
            image = BackgroundImage.of(linearGradient(LinearGradient.Direction.ToRight, Colors.Blue, Colors.Red)),
            blend = MixBlendMode.Lighten
        ),
    )
)

but I wasn't able to get something that did what you were asking (lightening the pink gradient with a splash of white)

[Shubham Singh]

Understood
Thanks a bunch for your time David 🙌

[David Herman]

My pleasure!

If you ever get Figma to show you the HTML it recommends, let me know.