Kevin Powell - Community•4w ago

Strange behaviour: gradient and rotation

Hello ! I am looking for a way to apply a gradient to a set of elements that are tilted I have managed to create a progressive gradient on the icons (and not applied to each of them), but when a transformation is applied, the gradient disappears Here is a Codepen to better understand what I want to achieve. I would like the gradient to be applied to the icons and not to the background https://codepen.io/perr0112/pen/azdKjVY

zowy71

CodePen

Untitled

...

17 Replies

Mannix•4w ago

https://codepen.io/MannixMD/pen/LEGBRop?editors=1100

Mannix

CodePen

Untitled

...

Jochem•4w ago

background-clip: text; still feels like magic sometimes

clemOP•4w ago

is it just me, or can i not see the icons? yes it's a bit tricky tho

Jochem•4w ago

the preview doesn't show them for some reason, but if you click through it should work

clemOP•4w ago

you can see something on your side?

Jochem•4w ago

huh, they show up in firefox, but not in edge or chrome

Mannix•4w ago

that's a first lol

clemOP•4w ago

thats why do you know which property is not well supported then? at least it works somewhere

Jochem•4w ago

I'm not confident enough to say for sure, but this feels like a bug any transform breaks the text clip, even a translate or scale

clemOP•4w ago

oh yea i have never understood how and why some properties are handled differently depending on the browser it makes no sense to me

Jochem•4w ago

There's apparently several issues: https://issues.chromium.org/issues/41385122 https://issues.chromium.org/issues/40858028 because it's very easy to underestimate how complex CSS engines are. They are wickedly complicated and while the spec often describes perfectly how a property should behave in isolation, interactions with other properties can be somewhat undefined. They can also be harder to implement in one engine vs the other because of previous choices, or have performance impacts that necessitate other choices on top of that, you're also working with different companies producing a product that has its own agenda, which can also weigh into decisions

clemOP•4w ago

i see, so some properties are managed completely arbitrarily, at least they do not follow any formal rules? oh thanks a lot, i'll dig into it

Jochem•4w ago

not completely arbitrarily, but even if you have solid requirements some of the edge cases in the implementation details are going to be based on the best-effort guess from the development team and the more complex the requirements and the system they live in, the more those assumptions will be different between two similar projects

clemOP•4w ago

oh wow ok, i understand better now, thank you very much i admit that at first glance, ididn't think at all that they were not perfectly aligned and that this kind of problem might arise i still haven't figured out how to solve this, so it's very frustrating

Jochem•4w ago

you could maybe replace the text with an SVG that's already rotated the right way though you'd probably already need the background on there properly

clemOP•4w ago

i think that i will play with opacity depending on the position of the icon inside the container because i don't need any color, gray is enough to play with in my case

curiousmissfox•3w ago

Css 
body {
  --bg: linear-gradient(180deg, #ff6ec4 0%, #7873f5 100%) center/cover fixed ;
 
  margin: 0;
  background: var(--bg);
  height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  font-family: sans-serif;
  font-size: 5rem;
}


/* Le parent qui portera le gradient et le masque */
.background__col {
  margin-inline:auto;
  background:#fff;
  display: grid;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
}

/* ✅ L’icône devient un masque de texte */
.icon {
  background: var(--bg);
    color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
}

/* Chaque wrapper gère la rotation */
.background__icon-rotate {
  position: relative;
  transform: rotate(30deg);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  z-index: 1; /* par-dessus le ::before */
}

Css 
body {
  --bg: linear-gradient(180deg, #ff6ec4 0%, #7873f5 100%) center/cover fixed ;
 
  margin: 0;
  background: var(--bg);
  height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  font-family: sans-serif;
  font-size: 5rem;
}


/* Le parent qui portera le gradient et le masque */
.background__col {
  margin-inline:auto;
  background:#fff;
  display: grid;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
}

/* ✅ L’icône devient un masque de texte */
.icon {
  background: var(--bg);
    color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
}

/* Chaque wrapper gère la rotation */
.background__icon-rotate {
  position: relative;
  transform: rotate(30deg);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  z-index: 1; /* par-dessus le ::before */
}

Oh weird, apologies discord didn’t load any comments while I was writing this; didn’t realize there were already replies!! Could the prefixed -webkit -background-clip prop help so it’s showing up in edge or Firefox ? I remember safari beibg very finicky about the order that properties are declared for some of the bg properties.

Gaming

Programming

Strange behaviour: gradient and rotation

Did you find this page helpful?