Question 192654 in Html Question posted in
Some basic documentation can be found here.

Html – background-clip: text working in 1 browser window but not the other?

I know on the website arc.dev, there is the usage of the background-clip: text property.

Screenshot

I looked at the source, and the HTML is:

<span class="sc-b8c3677-0 hxpAlL">remote job search</span>

Right click -> copy styles gives me:

    -webkit-font-smoothing: antialiased;
    text-align: center;
    color: white;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 46px;
    line-height: 51px;
    box-sizing: inherit;
    display: inline-block;
    background-position-x: 0px;
    background-size: 200%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: rgb(56, 123, 255);
    background-image: linear-gradient(90deg, rgb(162, 68, 255) 0%, rgb(52, 182, 255) 50%, rgb(162, 68, 255) 100%);
    animation: 3s ease-in-out 0s infinite normal none running bHafHd;

which I turn into:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .foo {
        -webkit-font-smoothing: antialiased;
        text-align: center;
        color: white;
        font-family: Inter, sans-serif;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: 46px;
        line-height: 51px;
        box-sizing: inherit;
        display: inline-block;
        background-position-x: 0px;
        background-size: 200%;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-color: rgb(56, 123, 255);
        background-image: linear-gradient(
          90deg,
          rgb(162, 68, 255) 0%,
          rgb(52, 182, 255) 50%,
          rgb(162, 68, 255) 100%
        );
        animation: 3s ease-in-out 0s infinite normal none running bHafHd;
      }
    </style>
    <span class="foo">remote job search</span>
  </body>
</html>

However, this fails to render properly. My browser says that background-clip: text is an invalid property value, even though I know it’s rendering correctly in my browser, on arc.dev.

What am I doing wrong?

Their page:
Their Page

My page:
enter image description here

Tags:

2

Answers


  1. 0

    The background-clip: text; property is not widely supported by all browsers, which might explain the error you’re encountering.

    To achieve the desired effect of a gradient background clipped to the text, you can use a combination of background and text effects. Here’s an updated version of the code that should work across different browsers:

    <!DOCTYPE html>
<html>
  <body>
    <style>
      .foo {
        -webkit-font-smoothing: antialiased;
        text-align: center;
        color: transparent;
        font-family: Inter, sans-serif;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: 46px;
        line-height: 51px;
        box-sizing: inherit;
        display: inline-block;
        background: linear-gradient(
          90deg,
          rgb(162, 68, 255) 0%,
          rgb(52, 182, 255) 50%,
          rgb(162, 68, 255) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: 3s ease-in-out 0s infinite normal none running bHafHd;
      }
    </style>
    <span class="foo">remote job search</span>
  </body>
</html>

    In this updated code, the -webkit-background-clip property is used for WebKit-based browsers (such as Safari) and the background-clip property is used for other modern browsers. By setting the background clip to text, the background gradient will be clipped to the text.

    To ensure that the text is not visible, the color property is set to transparent, and the -webkit-text-fill-color property is set to transparent. This makes the text transparent, allowing the clipped background to show through.

    With these adjustments, the text inside the <span> element with the class foo should now have a gradient background clipped to the text, creating the desired effect.

    Login or Signup to reply.
  2. 0

    TL;DR Some browsers support text only with -webkit-background-clip, not background-clip. Use both properties so that non-supporting browsers can fall back to the prefixed property.

    I assume you are using Chrome.

    Some browsers still do not support the text value for the background-clip property, only for the prefixed version, -webkit-background-clip. See the MDN docs for the full details. Currently it is Chrome, Opera, and Samsung Internet.

    As to the copying, Arc uses React and Styled Components (see Research section). Because of Chrome DevTools’s behavior with Styled Components (I believe the styles are dynamically added), it does not show the prefixed property, only the normal one, and does not show any warnings. Hence, the styles you copied included only the unprefixed property, which does not actually support the text value in Chrome.

    The solution is to use both -webkit-background-clip and background-clip, so that browsers that do not support text with the unprefixed property can fall back to the prefixed property.

    Demo

    The following demo has two lines of text, the first with only the unprefixed property and the second with both the unprefixed and the prefixed properties.

    I’ve slimmed down the styles a bit. A lot of it was for backwards compatibility (the fallback background in case background-image with a gradient is not supported, etc.).

    .normal {
  background-clip: text;
}

.both {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Base styles */

.text {
  -webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 46px;
  line-height: 51px;
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgb(162, 68, 255) 0%,
    rgb(52, 182, 255) 50%,
    rgb(162, 68, 255) 100%
  );
}
    <span class="text normal">remote job search</span>
<br>
<span class="text both">remote job search</span>

    Research

    The element in question has the classes sc-b8c3677-0 and hxpAlL.

    Searching for sc-b8c3677-0 in the scripts of arc.dev (via DevTools > Application > Frames > Scripts), I found it in this:

    g = o.default.span.withConfig({
  componentId: "sc-b8c3677-0"
})(c(), p)

    That is Styled Components (I believe) creating a "component" with the ID of sc-b8c3677-0.

    Styled Components then adds the class hxpAlL to this element.

    Related code (from "(index)" in Sources):

    /*!sc*/
data-styled.g162[id="sc-b8c3677-0"] {
  content: "hxpAlL,"
}

    <span class="sc-b8c3677-0 hxpAlL">remote job search</span>

    I believe the styles (from class hxpAlL) are dynamically added somehow, given the fact that

    • they do not appear in the actual final DOM;
    • they are in italics and uneditable;
    • the style element the block links to is empty and has the attributes data-styled="active".

    I have a vague recollection of Chrome hiding prefixed versions of properties, in addition to it sometimes showing shorthands instead of longhands.
    I cannot remember the exact bug reports about these, but I will try to find them.

    Reasons to believe Styled Components is involved at all:

    • The style element involved attributes data-styled="active" and data-styled-version="5.3.6" (the latest Styled Components version is 5.3.11).
    • The style blocks in the source have a "magic comment" of /*!sc*/ above them.
    • The o.default.span.withConfig code matches the style of usage of Styled Components in source code.
    • Its pretty common to use it with React.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search