Docs

[Mary Beth M]

Hello there X team. I have a hopefully quick question. I’m working on building a site and one of the design styles I’m doing is adding linear gradients to various page elements, like buttons, menu items, etc. I’d like to apply the same type of gradient style to a large block of text, but I think need to tweak my CSS a bit to get to display correctly.

I got super close, by getting the text background to have the gradient effect (see attached file), but I’d like it to be the actual text instead.

I’ve tried several variations of the following CSS, so you get an idea of where I’m stuck

background: -webkit-linear-gradient(left, #16de90, #2c68ef);
background: linear-gradient(left, #16de90, #2c68ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Thank you in advance for any assistance.
Cheers. 🙂

[Friech]

Hi There,

Thanks for writing in! Adding a gradient background to a container is one thing, and applying a gradient color to the text is another. Maybe you can add the properties below to your text so it will blend on the background.

 color: rgba(255, 255, 255, 0.13);
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;

If this does not work, please provide us an example of what you’re trying to do.

Thanks.

[Mary Beth M]

I’d like to do the text similar to my menu items (without hover effect) http://newswd.seattlewebanddesign.com/

This is what I used to create that gradient effect on the menu items, but not quite successful for plain text.

ul.sub-menu li a {
font-size: 18px;
background: -webkit-linear-gradient(left, #16de90, #2c68ef);
background: linear-gradient(left, #16de90, #2c68ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

ul.sub-menu li a:hover > span {
font-size: 16px;
background: -webkit-linear-gradient(left, #2c68ef, #16de90);
background: linear-gradient(left, #2c68ef, #16de90);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

[Mary Beth M]

Actually, I was able to get it to work with a little more tweaking with this:

font-size:64px; background: -webkit-linear-gradient(left, #16de90, #2c68ef); background: linear-gradient(left, #16de90, #2c68ef);-webkit-background-clip: text; -webkit-text-fill-color: transparent;

BUT! Is there a way to make the gradient display at an angle, instead of the flat horizontal effect? Like top left to bottom right for example. If not no worries 🙂

Thank you! Cheers

[Lely]

Hello Mary Beth,

Yes, a gradient effect on an angle is possible. Please check this link for guidance and sample:http://www.quirksmode.org/css/images/angles.html

Hope this helps.

[Author]

Posts