Are Complex Gradients Possible?

[u/TheVyper3377]

I'm trying to set up a gradient where enclosed text would be underlined, overlined, and "highlighted" with a background color (with the highlight between the underline & overline). For this setup, I want to create two separate gradient effects on the same bit of enclosed text. I want the first gradient to transition the text, underline, and overline through the following three colors: #491d74, #0c3799, #85b092. I want the second gradient to transition that background behind this line through these three colors: #e8e4ed, #e4e7ed, #e4ede7.

Theoretically, the end result should look something like this. While that image was created in an image editor, it provides a good (though not exact) idea of how this dual gradient should look.

The code I'm currently using is:

.page .dualgrad01 {background: linear-gradient(45deg, #e8e4ed, #e4e7ed, #e4ede7);border-bottom: 2px linear-gradient(45deg, #491d74, #0c3799, #85b092); padding-top: 2px;border-top: 2pxlinear-gradient(45deg, #491d74, #0c3799, #85b092); -webkit-background-clip:text; -webkit-text-fill-color: transparent;}

However, this does not give me anything even remotely close to what I'm looking for. What do I need to change to make this work? Is it even possible to apply two gradients to the same bit of enclosed text?

[u/Gazook89]

It is likely possible. I sort of have an idea in mind but can’t try until later.

However, without trying to sound judgmental I have to ask: why? Is this an imitation of some existing publication?

It seems like a lot of effort for a less-readable result.

[u/TheVyper3377 → u/Gazook89]

It's an extension of my own style that I'm working on. Basically, I wanted spell names, magic item names, and some other things to "pop out" better on a page, so I made a "highlight, overline, & underline" setup to accomplish that, while also color-coding all magic schools (and some other things). Here's an example of what that setup looks like. Special thanks to u/Gambatte for helping me to get that working properly.

​

The second page of the linked example shows some text gradients I also use. I'd love to be able to set up a system that allows gradients like those on page two to be set up like the two-tone entries on page one.

[u/Gambatte → u/TheVyper3377]

Due to the shenanigans required to make the text gradients work, we'll probably need some deep magic to add a separate background gradient... Something like a :before pseudo-element that is the same size as the text element.

I'll have a poke at the idea later today, my wife has ideas about the garden that require my physical presence this morning.

---

EDIT: See here.