Gradient on background of cards

[Weissbrich]

Hi there.

I’m wondering if there is a possibilty to use a gradient color for the backside of cards. I was trying to use the CSS snippet

$el {
background: rgb(47,148,92);
background: linear-gradient(90deg, rgba(47,148,92,1) 0%, rgba(84,197,241,1) 100%);
}

But it’s not working. Either when I replace $el with .mdf-11 .x-card-face.is-back.
Could you give me some advice please?

Thank you in advance.

[Jonson]

Have you tried adding it to the custom css for the page/post, and not for the element itself?

.mdf-11 .x-card-face.is-back {
  background: rgb(47,148,92);
  background: 
        linear-gradient(
                90deg, 
                rgba(47,148,92,1) 0%, 
                rgba(84,197,241,1) 100%
        );
}

[marc_a]

Hey @Weissbrich,

Thanks for reaching out!

In your card element CSS, you can try this one:

$el .x-card-face.is-back {
  background: rgb(47,148,92);
background: linear-gradient(90deg, rgba(47,148,92,1) 0%, rgba(84,197,241,1) 100%);
}

I tried it on my development website and it is working fine.

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

@Jonson, Thanks for chiming in and sharing your ideas.

Hope that helps.