I need to write with transparent text on a gradient background colour

Question

Can somebody help me to understand how is created the text in this website?

Basically, what I need is the text colour to be the same as the gradient colour(the background colour of the predecessor div) on a white background.

Thank you!!

Does the background need to be gradient or is it all one color? The example you have looks like the background is just black — Sasang, Apr 23 '17 at 18:14
So in your image whatever is black is actually a continuous gradient?! (I would use an actual image of what I need and I would show what I already tried to code) Please read [ask] — Roko C. Buljan, Apr 23 '17 at 18:16
the example is black but my background is gradient. Anyway, I just need to know what method is used. Black or gradient, doesn't matter. Then I will do research on my own. I've tried already for 1 hour and I cannot find anything. — Vlad Pana, Apr 23 '17 at 18:18
I'm not asking you about the background image actually - but to explain a bit better what you need and to show your best try... — Roko C. Buljan, Apr 23 '17 at 18:20
Or this? https://scotch.io/tutorials/text-backgrounds-and-gradients-with-background-clip — Asons, Apr 23 '17 at 18:23
I found it. Thank you anyway to everybody! http://jsfiddle.net/NT7z7/11/ — Vlad Pana, Apr 23 '17 at 18:27
@RokoC.Buljan Both my sample links use `-webkit-background-clip: text;` and so does the link OP posted...or you missed that? — Asons, Apr 23 '17 at 18:35
I thought you needed someting like this instead: https://i.stack.imgur.com/8D7yy.jpg - which is much closer :D — Roko C. Buljan, Apr 23 '17 at 18:35
You can also see: http://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background — vkjgr, Apr 24 '17 at 10:08

Rounin · Answer 1 · 2017-04-24T10:59:04.907

This isn't my best work because it relies on hardcoded positions and background-sizes, but it does work as a quick and dirty solution.

The text appears to be clipped from the surrounding black rectangles.

In fact each span of text has its own background, positioned such that it aligns perfectly with the gradient background of the h1 beneath.

h1 {
position: relative;
display: block;
width: 200px;
height: 200px;
background-image: linear-gradient(
red,orange,yellow,green,blue,indigo,violet
);
}

h1 span {
display: block;
position: relative;
top: 10px;
width: 180px;
height: 50px;
margin: 20px 10px;
line-height: 50px;
font-size: 40px;
text-align: center;
background-color: rgb(0, 0, 0);
}

h1 span::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(
red,orange,yellow,green,blue,indigo,violet
);
background-size: 200px 200px;
background-clip: text;
-webkit-text-fill-color: transparent;
}

h1 span:nth-of-type(1)::after {
content: 'Example';
background-position: -20px -20px;
}

h1 span:nth-of-type(2)::after {
content: 'Text';
background-position: -20px -80px;
}

<h1>
<span>Example</span>
<span>Text</span>
</h1>

You can work around having to position the background by positioning the text absolutely, as [is done](https://jsfiddle.net/NT7z7/11/) in the solution [linked by OP](//stackoverflow.com/questions/43574648/i-need-to-write-with-transparent-text-on-a-gradient-background-colour#comment74199897_43574648). — Just a student, Apr 24 '17 at 12:05

I need to write with transparent text on a gradient background colour

1 Answers1