Is rotating a radial gradient in CSS background property possible?
Is it possible to use a gradient to create an ellipse and make it look like a rotated ellipse? It's easy to create an ellipse with
radial-gradient, but I'm wondering whether this can be rotated in any angle. Why do I need it? I can draw images pixel by pixel with linear-gradients, but if I want an elliptical shape, that's not on the horizontal or vertical axis, it looks like doing so seems impossible to me if I don't want to draw them more or less pixel by pixel... But maybe I just couldn't come up with a proper solution. Is someone in here who could think of a way how to get an ellipse?18 Replies
easiest way I could think of would be to use transforms to just rotate the entire element
what do you mean with "rotate a radial-gradient"?
radial gradients are circles: you turn it and it looks the same
they can be ellipses
isnt that a different gradient?
😮 it is a radial gradient
the plot thickens
It's a little unclear what you mean by rotating a radial gradient like ἔρως said. But you can make a small circle with a gradient that rotates around a circular path without rotating the actual element, this can be done with CSS Houdini
@property
https://codepen.io/tok124/pen/MWNoqOmrotating a pseudo-element set to work as the background
i would call that "orbiting"
like a moon around a planet
Yeah that is true
or a planet around a star
I don't quite understand what's hard about rotating an ellipse. The semi major axis is not along the x or y axis?
Like, the lobes are rotated, the pointy bits don't point left/right or up/down, but at some other angle
we understood it
Well, I mean something like this image. But just with the
background property, not transforming the full element
If I use
transform: rotate(45deg), I can't have multiple of these ellipses in a single elementthat's why you rotate the pseudo-elements instead
the ::before and ::after
But then I could only have three different rotations?
depends
if you add more elements inside, you can have more
but you need more elements
or use svg
svg has radial gradients
Yes, I know. I was trying to recreate all the CSSBattle.dev puzzles with just the
background property but this seems to be the only thing that I can't seem to get right
SVG is forbidden there and creating multiple divs for it would feel like cheating for what I'm challenging myself to
But thanks for the input. I hoped I might have overlooked some special background size + farthest corner + something something to be able to achieve thatwithout transforms and/or tons of elements, i don't see it being possible
you wouldn't need transforms on elements for this. We can make these kind of shapes with something like
border-radius: 25% 75%;. But nope I can't think of anyway to do it with gradients either.