CSS Text with Gradient and Gradient Outline

Question

I can't seem to find anything or anyone that has done this. I'm trying to limit how many images we are using, and would like to create a text with a gradient as its "color" and have a gradient outline/stroke around it

So far, I haven't see anything that has incorporated the two together.

I've can get the text gradient done, by itself, and the text outline gradient by itself. Is there a way to combine to two as one?

h1 {
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 800;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}
h1::first-letter {
  font-size: 125%;
}

h2 {
  font-size: 50px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}
h2::first-letter {
  font-size: 125%;
}

https://codepen.io/deelite310/pen/OQxXrR

Double your element and position them absolutely the stroked one behind the other one. (This can't be done with ::after since you do use ::first-letter, and it's not really dynamic, so I won't post it as an answer. — Kaiido
– Kaiido, Commented Feb 28, 2018 at 3:09

Shawnnosaurus · Accepted Answer · 2019-01-23 05:40:33Z

There's a trick I've implement before, with the use of the "data-*" attribute and the pseudo before selector with z-index of -1. Then you'd need to remove the first-letter pseudo possibly for font-variant: small-caps depending on your needs.

Note: Throwing the layer backwards with z-index=-1 could get overlapped by other elements with a z-index.

h1, h2, h3 {
  font-variant: small-caps;
  font-size: 50px;
  font-weight: 800;
  text-align: center;
  -webkit-background-clip: text;
}

h1, h3 {
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}

h2, h3::before {
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}

h3::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
}

<h1>Character</h1>
<h2>Character</h2>
<h3 data-text="Character">Character</h3>

Simon · Accepted Answer · 2018-02-27 02:24:15Z

0

I would love to see this too... However, the only way I have seen this accomplished is using svg text. there is some good info on this here....

SVG Tutorials

answered Feb 27, 2018 at 2:24

Simon

778 bronze badges

1 Comment

Keoki Over a year ago

thanks I am using SVG on some issues, but It becomes an issue when I need responsive text. Especially on word wrapping. SVG you need to pUt your line breaks in, otherwise, your sVG/viewport goes against each other

Collectives™ on Stack Overflow

CSS Text with Gradient and Gradient Outline

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related