Seeking best approach to styling dynamic CSS content

I'm designing a website in Webflow. The site has card elements that each have assigned colors that correspond to their "rating". The current colors, however, aren't color-blind friendly.

I'd like to add patterns to each card to fix this: zig-zags, Xs, Os, things like that, such that the texture can provide some context.

I'd like to code this in CSS using gradient patterns, but I'm not clear on the best approach to accomplish this other than creating the illustrations and loading those in. My hunch is to do something like

.library__cardimage:has(background-color: #d7f6d2) {/*gradient pattern 1 */ }
.library__cardimage:has(background-color: #eef2ff) {/*gradient pattern 2 */ }
.library__cardimage:has(background-color: #ffebce) { /*gradient pattern 3 */ }

.library__cardimage:has(background-color: #d7f6d2) {/*gradient pattern 1 */ }
.library__cardimage:has(background-color: #eef2ff) {/*gradient pattern 2 */ }
.library__cardimage:has(background-color: #ffebce) { /*gradient pattern 3 */ }

But I suspect that this is incorrect for a number of reasons.

PPathos316 I'm designing a website in Webflow. The site has card elements that each have as...

Kevin Powell•5/17/23, 10:39 PM

I wish we could do that... Though we do have style queries that would work very much like that, afaik browser support is spotty atm

How are the backgrounds being applied right now? Like, what would be applying those colors your specifying in your example?

KKevin Powell I wish we could do that... Though we do have style queries that would work very ...

Pathos316OP•5/17/23, 10:48 PM

As it's through Webflow, the color is being applied via the CMS. The styles then propagate out onto each card from there.

I could (and, likely, will have to) upload the patterns in the CMS and then style them. Although my concern is that adding more assets to the site would affect performance compared to just coding them in with css. (However, this site has around 75-80 for mobile performance on pagespeed. I suspect I should be fine, especially if it makes the site more accessible).

Screen_Shot_2023-05-17_at_6.42.28_PM.png

Kevin Powell•5/17/23, 11:31 PM

If you inspect the page, you should be able to see what we flow is doing, and maybe hook into that

Pathos316OP•5/18/23, 2:58 PM

Will circle back on this later today

Pathos316OP•5/19/23, 11:39 PM

I’m thinking my best bet in this case might be to have the images in the CMS

Pathos316OP•5/20/23, 12:34 AM

Here are two takes on the solution I came up with: I'm not sure if I should go with either the higher or lower opacity patterns.

Screen_Shot_2023-05-19_at_8.32.39_PM.png

Screen_Shot_2023-05-19_at_8.32.34_PM.png

Screen_Shot_2023-05-19_at_8.32.26_PM.png

Screen_Shot_2023-05-19_at_8.32.21_PM.png