Layering different kinds of gradients can't only be done in Figma. It has to show in production as well, but there are many types of gradients.
We'll go over the types of gradients and how we can layer them to create an aesthetic component. Mix and match to get a sense of how each gradient layer contributes, and bend it to your own liking.
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%)"The first rgba is a semi-transparent blue (red=0, green=0, blue=255, alpha=0.32) at the center of the card, creating a blue glow.
The second rgba 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%)"This first linear gradient is very light, semi-transparent cyan-blue (red=0, green=128, blue=255, alpha=0.12) at the top, giving a cool tint.
The second is 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)"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
With all these combined, you get this bad boy.
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)"
}}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.
Simply add both the shadow and background we created above to the same component to get the final result.
Enough yapping, full code here. Wait, not yet bc i need to make a component for that. Hope u enjoyed tho.