CSS gradients and shadows: decorate without hiding content

How the rule works

A payment summary card can use a soft gradient to separate it from the page and a restrained shadow to signal its boundary. Start with an opaque background color, then layer the gradient; if it does not render, the text still has a known surface. A strong shadow is not a substitute for a border when forced colors remove decorative paint. Avoid putting required numbers into background images, since backgrounds can be disabled and have no text alternative. The sample uses a border as the primary edge and a small shadow as optional depth. Check the actual foreground contrast at both ends of the gradient, and review printing where backgrounds may be suppressed.

.payment-summary {
  color: #173148;
  background-color: #f2f6f8;
  background-image: linear-gradient(135deg, #f2f6f8, #e3edf2);
  border: 1px solid #aebfcb;
  border-radius: .75rem;
  box-shadow: 0 .4rem 1rem rgb(20 49 71 / .12);
}

Cost and verification

A CSS gradient avoids a separate image request, but large shadows or many overlapping effects can add paint work during scrolling. Profile a dense dashboard before using the same elevation on hundreds of cards. The gradient increases the contrast-check surface area: a foreground that passes on one end can fail on the other. The border supplies a boundary when the shadow is absent. Keep the visual effect subtle enough that focus indicators and status colors remain distinct from decoration.

Common Mistakes

• Do not place a monetary amount only in a background image.
• Do not use a shadow as the sole card boundary in forced colors.
• Do not check text contrast against only one gradient stop.

Connected lessons

• CSS Type and Media
• CSS backgrounds: reserve background images for decoration
• CSS color and contrast: pair text with its real surface
• CSS dark mode and forced colors: honor distinct user settings