Skip to content
CSS Transforms

Quick tip: layered box-shadow for depth

Stack shadows to fake thickness on a flat element.

Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.

What you built

  • A cube with three shaded faces
  • A floor grid from gradients
  • A hover state that lifts the block
Tagged 3d css perspective preserve-3d transforms
Share

Written by

Sam Whitfield

Sam makes tile-based games in the evenings and brings the sorting tricks back to the blog. Currently building a very small harbour.

All 17 posts by Sam Whitfield

Keep reading

11 comments

  1. Dana Ortiz

    Tiny typo in the second code block: the unit is missing on the translate value.

  2. Chen Wei

    This finally made the order of rotations click for me. I had them the wrong way round for weeks.

  3. Alex Moreau

    The paper cube exercise sounds fun. Are the templates available somewhere?

    1. Sam WhitfieldAuthor

      Thanks! A follow-up is already in the drafts.

      1. Tess Walsh

        Fixed now, thanks for spotting it.

      2. Sam WhitfieldAuthor

        The templates are in the downloads section of the reference post.

  4. Kofi Mensah

    Great write-up. Would love a follow-up on doing the same thing with SVG.

  5. Omar Haddad

    Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.

  6. Bea Kowalski

    Bookmarked. The table alone is worth it.

  7. Hana Sato

    The part about layer counts was eye-opening. Our landing page had over a hundred.

  8. Quinn Adler

    Short and useful. More quick tips like this, please.

Comments are closed.