Background-clip doesn't work after using position relative

Question

0.00/5 (No votes)

See more:

I am having issue with an background-clip:text it breaks after using relative for no reason I can see , text is there but there color is rendered transparent due to webkit fill color but it's not rendering the text gradient which was expected to be seen after position relative. after removing position relative it works perfect and I need to use it

So here is my code in `HTML`

HTML

<h3 class="colormanager">
    
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>

For animation purposes I have to use `position: relative`, (working in FireFox but not in Google Chrome or Safari)

Here is the `CSS`:

CSS

.internaltext{
    position: relative;
}

.colormanager {
    font-family:, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: relative;
    top: 0;
    white-space: none;
    margin-top: 15px;
    color:transparent;
    background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    padding-left: 20px
}

What I have tried:

I tried the following at internaltext:

Using inherit in all but result wasn't the one I wanted

CSS

{
color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

I didn't find any intresting answer so I here am I, asking questions.

Posted 7-Nov-22 18:30pm

meaow meaow

Updated 8-Nov-22 7:42am

Chris Maunder772.7K

v2

Add a Solution

Comments

Member 15627495 8-Nov-22 0:53am

it's because of background-clip:text;
'text' just apply background-color to the text.

"https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip"

meaow meaow 8-Nov-22 7:33am

then what should be the solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Accepted Answer · 2022-11-07T18:55:00

Are you trying to do something like this: https://cssgradient.io/blog/css-gradient-text/[^]

UPDATE

It is unclear what you are expecting, so I will explain what I see:

* The text can only be seen on a dark background.
* The following is white text:

CSS

background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);

If I use the background from the link that I provided above, you will see a white to gray/silver gradient on a blue background:

CSS

background: -webkit-linear-gradient(#eee, #333);

Here is my test HTML:

HTML

<main>
    <h3 class="colormanager">
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
    </h3>
</main>

And the CSS:

CSS

main {
    background-color: blue;
}

.colormanager {
    position: relative;

    display: flex;
    flex-direction: row;

    font-family: arial, Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: none;

    //background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Here is another article on this subject that may interest you: How to create gradient text with CSS[^]

And here are some tools for generating gradient text:
* CSS Text Gradient Generator - CSS Portal[^]
* CSS Text Gradient Generator | Colorffy[^]
* Free CSS Text Gradient Generator | UnusedCSS[^]
* Text Gradient generator[^]

Background-clip doesn't work after using position relative

1 solution

Solution 1

Add your solution here

Preview 0

Background-clip doesn't work after using position relative

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us