Question 46084 in CSS Question posted in
Some basic documentation can be found here.

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

.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

Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search