CODEWITHSUNDEEP
jqueryhtmlcss
Tyra Pululi
Tyra Pululi

Reputation: 446

text with gradient and border

Is any way to combine a border with a gradient background in fonts?

Using text-shadow kills the background effect, webkit-stroke goes in the inner font and also wont work in some browsers. Also tried with svg and more or less I get the same result as I do with webkit, only pro is browsers compatibility.

Maybe with js or jQuery?

Below example is close but not good enough

   h1 {
     color: red;
     -webkit-text-stroke: 3px black;
     font-size: 40px;
     background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
  }

Upvotes: 0

Views: 480

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

you may also take a look at mix-blend-mode to include firefox:

div {
  background: linear-gradient(35deg, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime);
  text-align: center;
}
h1 {
  /* clip-text average */
  mix-blend-mode: screen;
  box-shadow: inset 0 0 0 100vw white;

  /*optionnal with shadow striked *//*letter-spacing:1px;*/

  /* stroke average */
  text-shadow:
  /* first draw a white stroke , multiplacate shadow to increase opacity */
  0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
  /* use a darker color from here */
  0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000
}
<div>
  <h1>Another clip-text turned into mix-blend-mode</h1>
</div>
codepen to play with

Upvotes: 1

Brad
Brad

Reputation: 8698

OK this is a bit hacky so please don't hate me too much but it gets the job done I think.

Basically I apply the gradient to .title1 and the border to .title2 and position them on top of each other.

.container {
  position: relative;
}
.title {
  font-size: 40px;
  position: absolute;
}
.title1 {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.title2 {
  color: red;
  background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<div class="container">
  <h1 class="title title1">This is some h1 text</h1>
  <h1 class="title title2">This is some h1 text</h1>
</div>

Upvotes: 2

Related Questions