💻
HTML/CSS
  • Overview
  • How the Web Works
    • DNS, TCP/IP, HTTP, HTML
    • Anatomy of a Web Page
    • How a Web Page Gets Loaded
  • HTML/CSS intro
    • HTML
      • Boilerplate HTML
      • HTML Hierarchy
      • Meta Section
      • Text-formatting Elements
      • Image
      • Video
      • Anchor
      • Tables
      • Semantic Elements
    • CSS
      • Properties
      • Selectors
      • Box-Model
      • Block vs Inline
      • The Cascade
    • Layout
      • Container Elements
      • Grid vs Flexbox
      • Flexbox
      • Grid
  • Miscellaneous Topics
    • Background Image
    • Border-radius
    • Box-shadow
    • Centering Elements
    • Colors
    • Custom Properties
    • Forms
    • Typography
    • Units
  • Appendix
    • Google Fonts
    • Lorem Ipsum
    • HTML Cheatsheet
    • CSS Cheatsheet
    • Browser Support for HTML/CSS
    • unsplash.com (free images)
    • pexels.com (free images)
    • Chrome Default Stylesheet
  • Further Learning Resources
    • FE Mentor Challenges
    • Free Scrimba Courses
    • Kevin Powell Youtube
Powered by GitBook
On this page

Was this helpful?

  1. Miscellaneous Topics

Box-shadow

PreviousBorder-radiusNextCentering Elements

Last updated 3 years ago

Was this helpful?

box-shadow: x-offset y-offset blur-radius spread-distance

x-offset: A positive value offsets shadow to the right of the box. A negative value to the right.

y-offset: A positive value offsets the shadow down, a negative one up.

blur-radius: Positive values. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.

spread-distance: Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.

color: Specifies the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.

The author of this article built this visual to help see the different parameters. There is also a CodePen link in the article.

CSS box-shadow: What is the difference between blur and spread?Medium
Logo