Cascade Card Styles
Copy ready-to-use styles for Cascade cards. Paste into your global CSS or a module stylesheet.
Cascade Default
Dark gradient with purple/pink/sky glow on hover. The default site style.
/* Cascade Default Card */
.cascade-card {
border-radius: 1rem;
border: 1px solid rgba(255,255,255,0.05);
background: linear-gradient(180deg, rgba(2,6,23,0.95), rgba(2,6,23,0.90), rgba(2,6,23,0.95));
backdrop-filter: blur(12px);
box-shadow: 0 30px 80px -40px rgba(129,140,248,0.65);
}
.cascade-card .inner-glow {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 300ms ease;
}
.cascade-card:hover .inner-glow {
opacity: 1;
}
.cascade-card .inner-glow::before {
content: '';
position: absolute;
inset: -1.5rem;
background: linear-gradient(90deg, rgba(168,85,247,0.25), rgba(236,72,153,0.2), rgba(14,165,233,0.25));
filter: blur(36px);
}Glass Minimal
Frosted glass with light borders. Clean and airy.
/* Glass Minimal Card */
.card-style-glass {
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(20px);
border-radius: 1rem;
}Neon Glow
Purple neon border with outer glow. Perfect for dark mode.
/* Neon Glow Card */
.card-style-neon {
background: linear-gradient(180deg, rgba(6,11,38,0.95), rgba(6,11,38,0.85));
border: 1px solid rgba(147,51,234,0.5);
border-radius: 1rem;
box-shadow:
0 0 40px rgba(147,51,234,0.4),
inset 0 0 20px rgba(147,51,234,0.2);
}Elevated Light
Light background with deep shadows. Great for light themes.
/* Elevated Shadow Card */
.card-style-elevated {
background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.95));
border: 1px solid rgba(203,213,225,0.6);
border-radius: 1rem;
box-shadow:
0 40px 80px -30px rgba(15,23,42,0.4),
0 10px 20px -10px rgba(15,23,42,0.15);
color: rgb(15,23,42);
}Outline Clean
Transparent background with border only. Minimal footprint.
/* Outline Clean Card */
.card-style-outline {
background: transparent;
border: 2px solid rgba(148,163,184,0.4);
border-radius: 1rem;
box-shadow: none;
}Gradient Vibrant
Pink/purple/blue gradient with strong glow. Bold and eye-catching.
/* Gradient Vibrant Card */
.card-style-vibrant {
background: linear-gradient(135deg, rgba(236,72,153,0.2), rgba(147,51,234,0.25), rgba(59,130,246,0.2));
border: 1px solid rgba(236,72,153,0.4);
border-radius: 1rem;
box-shadow:
0 30px 60px -20px rgba(236,72,153,0.5),
inset 0 0 30px rgba(147,51,234,0.15);
}Emerald Glow
Fresh green gradient with subtle glow. Great for success states.
/* Emerald Glow Card */
.card-style-emerald {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.2), rgba(4,120,87,0.15));
border: 1px solid rgba(52,211,153,0.4);
border-radius: 1rem;
box-shadow: 0 30px 60px -20px rgba(16,185,129,0.45), inset 0 0 30px rgba(52,211,153,0.12);
}
.card-style-emerald h3 {
background: linear-gradient(90deg, rgba(110,231,183,1), rgba(52,211,153,1), rgba(16,185,129,1));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}Amber Shine
Warm golden yellow with radiant glow. Perfect for highlights.
/* Amber Shine Card */
.card-style-amber {
background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.2), rgba(180,83,9,0.15));
border: 1px solid rgba(251,191,36,0.4);
border-radius: 1rem;
box-shadow: 0 30px 60px -20px rgba(245,158,11,0.5), inset 0 0 30px rgba(251,191,36,0.15);
}
.card-style-amber h3 {
background: linear-gradient(90deg, rgba(252,211,77,1), rgba(251,191,36,1), rgba(245,158,11,1));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}Rose Elegant
Soft pink/red gradient. Sophisticated and warm.
/* Rose Elegant Card */
.card-style-rose {
background: linear-gradient(135deg, rgba(244,63,94,0.15), rgba(225,29,72,0.2), rgba(190,18,60,0.15));
border: 1px solid rgba(251,113,133,0.4);
border-radius: 1rem;
box-shadow: 0 30px 60px -20px rgba(244,63,94,0.5), inset 0 0 30px rgba(251,113,133,0.15);
}Cyan Fresh
Bright cyan with crisp edges. Modern and clean.
/* Cyan Fresh Card */
.card-style-cyan {
background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(8,145,178,0.2), rgba(14,116,144,0.15));
border: 1px solid rgba(34,211,238,0.4);
border-radius: 1rem;
box-shadow: 0 30px 60px -20px rgba(6,182,212,0.5), inset 0 0 30px rgba(34,211,238,0.15);
}Lime Electric
Vibrant lime green with electric energy. Eye-catching.
/* Lime Electric Card */
.card-style-lime {
background: linear-gradient(135deg, rgba(132,204,22,0.15), rgba(101,163,13,0.2), rgba(77,124,15,0.15));
border: 1px solid rgba(163,230,53,0.4);
border-radius: 1rem;
box-shadow: 0 30px 60px -20px rgba(132,204,22,0.5), inset 0 0 30px rgba(163,230,53,0.15);
}