CSS Gradient vs Box Shadow

Compare CSS gradients and box shadows for backgrounds and depth, and see which generator to use for each effect.

Gradients and box shadows are both pure-CSS visual effects, but one fills an element with color and the other adds depth around it.

CSS Gradient Generator

  • Fills a background with a smooth blend between two or more colors.
  • Linear gradients blend along a line at an angle; radial gradients blend outward from a center.
  • The output is a CSS gradient function used in background or background-image.
Open CSS Gradient Generator

Box Shadow Generator

  • Adds a drop shadow around an element's border, with offset, blur and spread.
  • Can draw the shadow inside the border with inset for a pressed look.
  • The output is a box-shadow value for one or more shadow layers.
Open Box Shadow Generator

Verdict

Use a gradient for colored backgrounds and a box shadow for elevation and depth. They combine well, so a card often has both a gradient background and a shadow.