Box-shadow
The CSS box-shadow property renders one or more shadows around or within an element’s box.
CSS in Depth, Second Edition
The CSS box-shadow property adds one or more shadows around an element's box.
- How it is used
- Adds visual depth, pressed-state feedback, flat-design accents, and border-like decoration to interface elements.
- How deep it goes
- Explains offsets, color, blur, spread, inset placement, layering, and state changes through progressively styled buttons.
- Examples
- Uses raised, flat, hybrid, inset, layered, blurred, and crisp shadows on progressively revised buttons.
- What you can do after
- Apply it via CSS to create controlled depth, softness, inset feedback, or crisp curved accents.
Tiny CSS Projects
The CSS box-shadow property adds one or more shadows around or within an element's box.
- How it is used
- Creates depth, separation, and floating-card effects by shadowing element boxes.
- How deep it goes
- Explains offsets, blur, spread, color, inset, and bounding-box behavior, but does not detail the full grammar.
- Examples
- Demonstrates checkout cards, a profile card, and a virtual credit card with increasingly soft shadows.
- What you can do after
- Apply it via CSS to style containers and cards with controlled depth, separation, or inset shading.
Build a Website with ChatGPT
box-shadow is a CSS property that renders one or more shadows around an element's box.
- How it is used
- Adds a raised, drop-shadow effect to portfolio cards and other block-level page elements.
- How deep it goes
- Explains the declaration’s offsets, blur, transparency, and optional spread, but stops short of advanced shadow composition.
- Examples
- Uses portfolio cards, an 8px-by-8px shadow, 4px blur, and rgba transparency as concrete examples.
- What you can do after
- Apply it via CSS to add, tune, or remove shadows from cards and other block-level elements.
Related concepts
- style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
- bordercontrasts with · A CSS border is the visual edge surrounding an element’s content and padding areas, defined by properties such as width, style, and color.
- cardconfigures · A card is a reusable user-interface component that presents related information and controls in a compact, visually distinct unit.
- text-shadowcontrasts with · The CSS text-shadow property applies one or more shadows to text glyphs.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.