Practical patterns for layering shadows, combining borders and radius, and adding subtle highlights.
Layer your shadows first
Cards on the same page should have a clear hierarchy. Use different shadow strengths for resting, raised, and floating layers.
Deeper is not better. Keep opacity low or shadows start to look dirty.
Combine borders and radius deliberately
Thin borders with small radius look refined; thicker borders with larger radius look bolder. Choose the combination by card type.
Adjust border colors separately for dark mode, since light-mode values will look too bright.
Use gradients for subtle highlights
A very light gradient on a card can simulate material depth better than a flat color.
Paste generated styles into the real component to verify them and check for conflicts with existing styles.