## 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. ```js // 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. ```js // 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. ```js // 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 ```js 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: ```js 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: 1. 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 2. 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 3. 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.

Simply add both the shadow and background we created above to the same component to get the final result. Enough yapping, full [code](https://github.com/willdphan/willdphan-ui/blob/main/app/components/interactive-card-stack.tsx) here. Wait, not yet bc i need to make a component for that. Hope u enjoyed tho.