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 animation with Javascript, so I need all my child divs to be masking the same overall gradient - I do not want them to each have their own mini gradient.
Basically, I would like the following gradient but masked to the text and images its children contain: orange gradient background displayed containing text and three logos, all of which are black
My relevant CSS is broken up into four parts. One for the parent div, one for my name, and then two for the icons (the grid wrapper and the individual grid squares). To get the above result I insert my gradient like so:
#quick-info {
background: linear-gradient(to right, #f06d06, #ffa800);
...
}
#main-name {
...
}
#connections {
...
}
.connections-icons {
...
}
According to my online research, if I want to mask a background I would do something like so:
#quick-info {
...
}
#main-name {
background: linear-gradient(to right, #f06d06, #ffa800);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
...
}
#connections {
...
}
.connections-icons {
...
}
Which gives a result like: my name is displayed in an orange gradient, the background is transparent and the logos are black
The same research told me that if I want to mask a parent background, I just need to move the declaration of the background gradient to the parent div:
#quick-info {
background: linear-gradient(to right, #f06d06, #ffa800);
...
}
#main-name {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
...
}
#connections {
...
}
.connections-icons {
...
}
This kinda works, as I can tell the text is being "filled" with the background, but the parent background is not really being masked in the same way as before so it's entirely invisible unless you highlight it: text is invisible... ..unless highlighted
I am also struggling to understand how to use my images as a mask. I am using PNG at the moment but can swap to SVG if that is easier to use. I cannot even get a singular mask working (which I could easily do when it came to text)
Note in this attempt I am putting the background in the child as I have already established my current approach to putting the gradient in the parent means even if I do mask properly, I won't be able to see as such:
#quick-info {
...
}
#main-name {
...
}
#connections {
...
}
.connections-icons {
background: linear-gradient(to right, #f06d06, #ffa800);
...
}
Gives me: each icon has an individual gradient
But when I add the mask everything is transparent/gone (using the same mask for each element is obviously wrong, but for the sake of this question is it clear to see that not even the actual email icon was masked properly):
#quick-info {
...
}
#main-name {
...
}
#connections {
...
}
.connections-icons {
background: linear-gradient(to right, #f06d06, #ffa800);
-webkit-mask-image: url(img/email.png);
...
}
How can I make it so that the parent background is only visible in the masks created by the children?
