Interactive Card Stack
Published May 15, 2025
Updated Jun 8, 2025
Interactive Card Stack
This component displays an interactive stack of cards with smooth hover animations, gradients, and blur effects.
I'm learning too
I explored the use of rgba colors (and the concept) to try and make designs that are both fluid and dynamic, yet simple. Still found it crazy I didn't know much about rgba stuff up until now.
Anyways, I wanted a design that could be universally applied. Gradients help!
Color
Each card in the stack uses a layered gradient background to create a vibrant, glassy effect. Let's go over the background color first. Keep in mind that the order matters! The gradients are composed of:
Radial Gradient
Creates a soft, glowing center on each card, giving a sense of depth and focus.
// Radial Gradient
"radial-gradient(65.62% 65.62% at 50% 50%, rgba(0, 0, 255, 0.32) 0%, rgba(0, 0, 255, 0) 100%)"rgba(0, 0, 255, 0.32) 0%
This is a semi-transparent blue (red=0, green=0, blue=255, alpha=0.32) at the center of the card, creating a blue glow.
rgba(0, 0, 255, 0) 100%
This is fully transparent blue at the edges, so the glow fades out smoothly.
Linear Gradient
Adds a subtle blue overlay, blending with the radial gradient for a modern, frosted look.
// Linear Gradient
"linear-gradient(rgba(0, 128, 255, 0.12) 0%, rgba(255,255,255,0.10) 100%)"rgba(0, 128, 255, 0.12) 0%
A very light, semi-transparent cyan-blue (red=0, green=128, blue=255, alpha=0.12) at the top, giving a cool tint.
rgba(255,255,255,0.10) 100%
A very light, semi-transparent white at the bottom, softening the gradient and adding a frosted effect.
Solid Color Overlay
A semi-transparent blue is layered on top to unify the card's appearance and enhance contrast.
// Solid Color Overlay
"rgba(0, 0, 255, 0.56)"rgba(0, 0, 255, 0.56)
This is a moderately transparent blue (red=0, green=0, blue=255, alpha=0.56) that sits on top of the gradients, giving the card a cohesive blue tone and helping the text stand out.
Combined
style={{
background:
"radial-gradient(65.62% 65.62% at 50% 50%, \
rgba(0, 0, 255, 0.32) 0%, \
rgba(0, 0, 255, 0) 100%)," +
"linear-gradient(rgba(0, 128, 255, 0.12) 0%, \
rgba(255,255,255,0.10) 100%)," +
"rgba(0, 0, 255, 0.56)"
}}With all these combined, you get this bad boy.
Shadows
To enhance the glassy, floating effect, each card uses multiple layered box shadows. Here's the code and what each layer does:
boxShadow:
"rgba(0, 128, 255, 0.06) 0px -12px 16px 0px inset, \
rgba(0, 128, 255, 0.16) 0px 4px 16px 0px inset, \
rgba(0, 128, 255, 0.12) 0px 0.75px 0.25px 0px inset, \
rgba(0, 128, 255, 0.32) 0px 0.25px 0.25px 0px inset, \
rgba(0, 0, 255, 0.06) 0px 2px 16px 0px, \
rgba(0, 0, 255, 0.06) 0px 23px 14px 0px, \
rgba(0, 0, 255, 0.19) 0px 10px 10px 0px, \
rgba(0, 0, 255, 0.26) 0px 3px 6px 0px, \
rgba(0, 0, 255, 0.40) 0px 0px 0px 0.75px"The shadows are organized into three main groups:
-
Inner Shadows (inset)
- Top inner glow: Creates a subtle highlight at the top
- Bottom inner shadow: Adds depth and softness
- Edge highlights: Thin lines that enhance the glassy appearance
-
Outer Shadows (below the card)
- Close shadows: Create immediate depth and separation
- Mid-range shadows: Add dimension and make the card pop
- Far shadows: Create a floating effect and enhance depth perception
-
Border Effect
- A thin blue outline that defines the card's edges
Each shadow uses varying levels of opacity (0.06 to 0.40) to create a smooth, layered look that enhances the card's three-dimensional appearance.
Enough yapping, full code here. Wait, not yet bc i need to make a component for that. Hope u enjoyed tho.