Animated shadow
A few months ago, I created a demo card component with a semi-transparent background and a gradient border that animates on hover. When the hover ends, the animation pauses and then continues afterward. It’s a really cool effect, but I’d like to add a shadow that appears on hover and matches the gradient and its animation. Is it possible to create something like this in my example using the box-shadow or filter: drop-shadow property? https://codepen.io/luko248/pen/ZYbrJpR
11 Replies
Kevin Powell
YouTube
Create an animated, glowing, gradient border with CSS
Inspired by a codepen by Gayane Gasparyan - https://codepen.io/gayane-gasparyan/pen/jOmaBQK - I took my own attempt to create a rotating gradient border, including a nice soft glow.
To do it, I use @property, which doesn't have fantastic browser support, but near the end of the video I look at why that's not really a big deal 🙂
🔗 Links
...
I obviously saw the video, but it's not a glassmorphism card.
You won’t be able to use a gradient with box-shadow ; you’ll have to fake it with a pseudo-element and blur.
I know, but I want to keep the background color semi-transparent, which means I need to use a mask. And when I use a mask, it works similarly to overflow: hidden, so I think it’s not possible to create a fake shadow in any way. Please take a close look at the attached demo — I believe that currently, combining a semi-transparent glass effect with a gradient border and a shadow that animates on hover isn’t possible to achieve purely in CSS.
You can use colors with alpha less than 1 instead of a mask for semi-transparency.
I dont think so, please show me how. you can fork my demo.
https://codepen.io/chooking/pen/ByjYzKW
I don't know what kind of box-shadow you wanted, so I just used the gradient-angle.
I just realized you might want the border gradient to extend out as a glow. In that case, you can use a larger size after pseudoelement with the same gradient but lower alpha.
I didn't use the exact same color you did because I didn't want to figure out the codes for the named colors just to redo them with different alphas.
Well, I came to this result on my own, but it’s basically a semi-transparent border and not a shadow that fades away. So I think classic shadow effect is not possible in this case using pure CSS 😄