Questions tagged [background-clip]
14 questions
6
votes
4 answers
Wrong scroll behaviour when using background-clip
When using background-clip: text and -*-text-fill-color: transparent; together with overflow: auto the scrolling is inconsistent in Firefox and it seems to not scroll at all on Chrome (both MacOS). There seem to be rendering issues.
I tried changing…
elveti
- 2,316
- 4
- 20
- 27
3
votes
1 answer
Strange lines when using `background-clip: text` on Safari
I'm trying to make a gradient text using CSS. It currently works in Chrome and Firefox, but on Safari I get strange lines outside the border box.
My CSS looks like this...
h1 {
font-family: "Work Sans", Helvetica, Arial,…
Trenskow
- 3,783
- 1
- 29
- 35
1
vote
1 answer
Added text-shadow on an text with -webkit-background-clip: text
I'm trying to add a drop shadow on this text, but it's always appearing inside the text. Is there a way to make the part of the shadow that's inside the text disppear/go behind the background image?
.mask {
background-image:…
Eric Sayag
- 45
- 5
1
vote
2 answers
CSS background-clip: text and opacity transition
I have a heading text that has each individual letter wrapped within a , as so:
heading text that has each individual letter wrapped within a , as so:
H
e
l
l
o
I would like to apply a…
mknelsen
- 23
- 3
1
vote
1 answer
Use a background-image: linear-gradient (or image) with a container of divs where only the divs show the background and the space around remains white
New Front-ender here. I am trying to create a container full of divs using flex-box or grid (grid container flexed in this example) where only the divs show the background-image and I want the rest of the container to be white. There is a similar…
rachFace
- 11
- 5
1
vote
1 answer
Using background-clip on a gradient overlay
What I'm trying to achieve:
Both elements (the arrow container + full width bar) share the same gradient. What I've tried is to make both elements separately and just apply the gradient to both of them, but for obvious reasons it looks…
Sigurd Mazanti
- 2,098
- 1
- 8
- 24
0
votes
0 answers
Can a fixed background-image that's clipped to text scroll in Firefox?
In all modern browsers, the background-clip: text style will cause the background to be clipped to the shape of the text in the element (MDN). Scroll the rendered result and the background-clipped text moves along with everything else on the…
Impirator
- 1,393
- 1
- 12
- 24
0
votes
0 answers
Why doesn't work this CSS wipe text animation properly in Safari 14?
Although I parsed my CSS code with Autoprefixer (last 15 browser versions, Safari 13 included) this CSS animation doesn't work properly in Safari 14.
First: The CSS animation plays not fluently. The single rows are flickering.
Second: The…
MNef
- 1
- 1
0
votes
2 answers
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);
}
Hello
also when I type background-clip: and the…
Randomguy660
- 57
- 5
0
votes
0 answers
Background Clip property issue on screen resizing
I am creating a little site with the help of HTML/CSS. I am using this code to add linear gradient to my text:
background-image: linear-gradient(-86deg, #F11267, #FF417C);
-webkit-background-clip: text;
background-clip:…
Максим Левченко
- 11
- 2
0
votes
0 answers
Reveal animated background for specified text spans on mouse hover
Goal
A hero section with text
The hero text contains spans
A circle follows the mouse position
Where the circle overlaps the spans, an animated background is revealed
All other text remains black, even if they are within the circle
Ideally, I'd…
Razzzzz
- 21
- 5
0
votes
0 answers
For a given child div, how can I properly mask a parents div background so that I only see the gradient in the masked content?
I don't have enough rep to include images, so I've had to make do with plain old hyperlinks
I am trying to create a cool visual effect for my personal website. I want my socials and name to mask a background gradient. Later I will be adding simple…
Frank
- 1
- 1
0
votes
0 answers
HTML/CSS: background-clip: text doesn't work when background is fixed
This may be a bug, but I am not sure. I've been trying to get a background gradient to be clipped by text with "background-clip: text", and it's supposed to create a nice scrolling effect where the gradient scrolls but the text stays with the page…
MrKoix
- 1
0
votes
1 answer
Its possible to make a text gradient clip that is all page size? Not repeating on every element
.gradient {
background-color: #00ccaa;
background: linear-gradient(0deg, #00ccaa, #f530a9);
background-size: cover;
background-clip: text;
box-decoration-break:slice;
-webkit-background-clip: text;
-webkit-text-fill-color:…
casencio
- 1
- 3