15

Here is what I'm trying to achieve: enter image description here

Is there a way to do this with a W3 web technology, e.g. SVG, Canvas?

Improve this question
0

1 Answer 1

Reset to default
7

Yes, you can, by using the text-fill-color and background-clip properties.

html, body { background: #000; } p { margin: 0px; } #clip { background: linear-gradient(to right, rgba(127, 127, 127, 1) 23%, rgba(234, 85, 7, 1) 20%, rgba(234, 85, 7, 1) 57%, rgba(127, 127, 127, 1) 59%); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 8vw; font-weight: bold; text-align: center; }
<p id="clip">Lorem ipsum dolor sit </p>

NOTE: Visit this link for more information.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Brilliant solution, thank you!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.