Background-clip: text; isnt working at all in css

Question

.test{
  color: transparent;
  font-size: 50px;
  font-weight: bold;
  transition: 0.5s;
  background-clip: text;
  background: linear-gradient(to right, green, blue);
}

<p class="test">Hello</p>

also when I type background-clip: and the autocomplete options come up for example: border-box, 'text' doesn't come up there at all and I've tried it on Microsoft Edge and Chrome and it still doesn't do anything at all is there any way to fix this?

I tried rearranging the properties in the CSS file and I used a new browser but that still did nothing at all

background-clip **after** background not before it – Temani Afif Mar 10 '23 at 07:50 — Temani Afif, Mar 10 '23 at 07:50

score 2 · Answer 1 · answered Mar 09 '23 at 19:45

2

I think your problem is browser support. After a quick Google search, I found:

The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element.

So to fix your problem simply add:

-webkit-background-clip: text;

.test {
  color: transparent;
  font-size: 50px;
  font-weight: bold;
  transition: 0.5s;
  background-clip: text;
  background: linear-gradient(to right, green, blue);
  background-clip: text;
  -webkit-background-clip: text;
}

<p class="test">Hello</p>

answered Mar 09 '23 at 19:45

Ethan

118
1
13

thats worked now thanks but do you know why it didnt just work without that? like why cant it just work without it? – Randomguy660 Mar 09 '23 at 20:00
```background-clip``` on its own does work in other browsers that aren't based on WebKit (ie: Firefox). However, ```background-clip``` doesn't work on WebKit-based browsers (ie: Chrome and Safari). Instead, you need to use the ```webkit``` preface. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip for more information about ```background-clip``` browser support. – Ethan Mar 09 '23 at 20:10

Brooke · Answer 2 · 2023-03-09T19:42:19.403

0

Your CSS code is addressing the name class, but your p element has the test class. Change one so that they match.

Additionally, you may need to add the -webkit-background-clip CSS property for this code to work on Chrome. An example of the code functioning is shown below.

.name {
  background: linear-gradient(to right, green, blue);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  font-size: 50px;
  font-weight: bold;
  transition: 0.5s;
}

<p class="name">Hello</p>

edited Mar 09 '23 at 19:42

answered Mar 09 '23 at 18:58

Brooke

337
2
8

i just did that and still it didnt work – Randomguy660 Mar 09 '23 at 19:29
1

@Randomguy660 Can you explain what didn't work? I've attached a code snippet for reference. This code functions for me on Firefox Developer Edition version 111. – Brooke Mar 09 '23 at 19:36
its fine now i just needed to add -webkit to the background clip – Randomguy660 Mar 09 '23 at 19:59
1

@Brooke Try it on chrome it won't work without the ```-webkit``` preface. – Ethan Mar 09 '23 at 20:22

Background-clip: text; isnt working at all in css

2 Answers2