Click here to Skip to main content
15,877,246 members
Please Sign up or sign in to vote.
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
Updated 8-Nov-22 7:42am
v2
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

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[^]
 
Share this answer
 
v4
Comments
meaow meaow 8-Nov-22 7:33am    
I know this already buddy but the position relative gives issues
Graeme_Grant 8-Nov-22 8:08am    
Okay... I have updated my answer with a working solution based on what I can understand from your question and code.
meaow meaow 8-Nov-22 8:32am    
what I wish to achieve is that

the innertext with the help of js will be transition as changed

but the transition is only being smooth with internaltext being position relative which works perfectly fine as a gradient text in firefox browser but it isn't visible in Chrome it is transparent as I can see but it's not the z-index issue as I can select the text. which means it is there.
Graeme_Grant 8-Nov-22 9:00am    
-webkit is your issue. I did provide a link that shows you how to handle other browsers.
meaow meaow 8-Nov-22 8:34am    
for short path for u my friend


use position relative in internaltext
in a way that gradient text color doesn't disappear

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900