Metallic animated CSS Gradient
I have an animated CSS only Gradient on https://westnine.tempurl.host/ that I am trying to make look like a metallic shimmer but only using the colours within the SVG.
At present it is looking a bit rainbow-y for lack of a better word.
Can anyone help? ππ»
Here is my CSS:
.bg-vector {
position: absolute;
right:0;
top:0;
z-index: -1;
filter: hue-rotate(0deg);
animation: shimmer 2s infinite;
}
@keyframes shimmer { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes shimmer { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
Kieran
West Nine | Website Coming Soon
Homepage | West Nine | Website Coming Soon
West Nine - Website Coming Soon
3 Replies
I'm not seeing in animation when visiting that link in chrome. But my decade plus experience in graphic design has me thinking the hue shifting will always sort of fall short of the desired effect.
If I were approaching this problem, I would make the SVG logo a single color, and use it as a mask over a custom animated background gradient written in CSS instead of being in the SVG
You can animate gradients using custom properties, like this (93% browser support),
https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
or use a generative tool for the css like this
https://animated-gradient-background-generator.netlify.app/
DEV Community
We can finally animate CSS gradient
Find out more CSS tricks at css-tip.com Thanks to the new @property defined in the CSS Properties...
Animated Gradient Background Generator
A tool for creating animated background gradients in pure CSS.
True metal shimmer involves reflections. You don't need to do ray tracing or even simulate it, but you do need some extra bright or even white lines or spots, depending on the geometry, to simulate parts of extra high reflectance that occur when the angle of the surface is just right to reflect the light source directly into your eyes.
@Rowe2ry @Chooβππππ thank you for your responses. I will give this a go tomorrow when I'm back in the office and see how I go. Much appreciated