The Relationship Between Shadows and Color in Web Design | How to Choose Background Colors That Make Cards Float Naturally

To make cards appear to float naturally, it helps to think about the card surface, page background, and shadow color together before simply making the shadow darker. In CSS, the appearance of a shadow depends not only on its color but also on its position, blur, spread, and transparency. The same shadow can feel stronger or weaker when the color behind it changes, so choosing the page background first and tuning the shadow afterward usually produces a more consistent result.

Pair a white card with a very light background that has only a small color difference

In the following HEX examples, where HEX is a hexadecimal color code used on the web, use white ■#FFFFFF for the card surface and light gray ■#F8FAFC for the page background. The contrast ratio, meaning the difference in relative luminance, is only about 1.05:1. Because the colors alone do not create a strong boundary, spacing and a shadow can help make the card appear slightly elevated from the page.

For the shadow’s base color, one example is dark navy ■#0F172A with transparency added in CSS, such as box-shadow: 0 8px 24px rgb(15 23 42 / 12%);. MDN describes box-shadow in terms of horizontal and vertical offsets, blur radius, spread radius, and color, and it also supports multiple shadows. The alpha value at the end of rgb() represents transparency, so lowering the alpha makes the same base shadow color blend more softly with the background.

For a natural result, adjust blur and transparency before making the shadow darker

A very dark, sharp shadow can start to look more like a hard outline around the card. For a lighter sense of elevation, use lower opacity and a broader blur instead of relying on a very dark shadow color. For example, box-shadow: 0 2px 6px rgb(15 23 42 / 8%), 0 12px 28px rgb(15 23 42 / 10%); layers a closer shadow with a broader one. These are example values rather than a fixed rule; the right settings depend on the card size and the background behind it.

If both the page and card are white ■#FFFFFF, there is no surface-color difference, so the shadow carries more of the visual separation. When the page uses a slightly darker background such as ■#F8FAFC, the surface difference also contributes, so the shadow can often be softer. The focus here is not on choosing card and page colors as a complete system, but on adjusting shadow strength to the background already in use.

Do not make the shadow the only important boundary or interaction cue

Shadows are useful for decorative depth, but important boundaries or interaction states should not depend on a shadow alone. Under W3C Non-text Contrast, if a visible boundary is the only cue that identifies an interactive component, that visual information needs at least 3:1 contrast against adjacent colors. A supplemental 3D-style drop shadow, however, is not something that must independently meet 3:1 in every case.

If the whole card is clickable, do not rely on elevation alone to communicate that fact. Use visible link text, a button, or a clear focus indicator as well. For example, a blue ■#2563EB focus ring provides about 4.94:1 contrast against a light-gray ■#F8FAFC page background. Blue-gray ■#475569 body text on a white ■#FFFFFF card provides about 7.58:1 contrast.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual card-surface, page-background, text, and focus combinations separately.