- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS box-shadow
The CSS box-shadow property is used to define/set one or more shadows to an element. For example:
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{padding: 12px; border: 1px solid; box-shadow: 4px 8px gray;} </style> </head> <body> <div>CODESCRACKER</div> </body> </html>
Output
CODESCRACKER
CSS box-shadow Syntax
The syntax of box-shadow property in CSS, is:
box-shadow: horizontal-offset vertical-offset blur spread color inset;
The first two parameters are required. Now let me define all these 5 parameters:
- horizontal-offset - A positive value given to this parameter, to define a shadow on the right side, whereas a negative value given to this parameter, to define a shadow on the left side, of specified element
- vertical-offset - A positive value given to this parameter, to define a shadow below the element or box, whereas a negative value given to this parameter, to define a shadow above the element or box
- blur - This parameter is used to define the blur radius. Higher value will blur the shadow at more intensity
- spread - This parameter is used to define the spread radius. A positive value given to this parameter, increases the shadow spread, whereas a negative values given to this parameter, decreases the shadow spread
- color - This parameter is used to define/set color of the shadow. The default value of this parameter is the color of the text
- inset - This parameter is used to convert the shadow from outer to inner. That is, use this keyword to create shadow to the content area of specified element, or simple inside the border area of specified element
Note - The other three keywords that can also be used to define the box-shadow property in CSS are none, initial, and inherit. The none is used not to apply shadow. The initial is used to use the default value. The inherit is used to use the value inherited by the parent element.
CSS box-shadow Example
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> div{margin: 30px 10px; border: 1px solid; padding: 12px;} div.a{box-shadow: 4px 10px;} div.b{box-shadow: -4px -10px;} div.c{box-shadow: 6px 6px red;} div.d{box-shadow: -6px -6px red;} div.e{box-shadow: 6px 6px 6px red;} div.f{box-shadow: 6px 6px 14px red;} div.g{box-shadow: 6px 6px 6px 6px red;} div.h{box-shadow: 6px 6px 6px 12px red;} div.i{box-shadow: inset 6px 6px red;} div.j{box-shadow: inset 6px 6px 6px red;} div.k{box-shadow: 4px 4px red, -4px -4px blue;} div.l{box-shadow: 6px 6px 6px red, -6px -6px 6px red;} </style> </head> <body> <div class="a">box-shadow: 4px 10px</div> <div class="b">box-shadow: -4px -10px</div> <div class="c">box-shadow: 6px 6px red</div> <div class="d">box-shadow: -6px -6px red</div> <div class="e">box-shadow: 6px 6px 6px red</div> <div class="f">box-shadow: 6px 6px 14px red</div> <div class="g">box-shadow: 6px 6px 6px 6px red</div> <div class="h">box-shadow: 6px 6px 6px 12px red</div> <div class="i">box-shadow: 6px 6px red inset</div> <div class="j">box-shadow: 6px 6px 16px red inset</div> <div class="k">box-shadow: 4px 4px red, -4px -4px blue</div> <div class="l">box-shadow: 6px 6px 6px red, -6px -6px 6px red</div> </body> </html>
Output
box-shadow: 4px 10px
box-shadow: -4px -10px
box-shadow: 6px 6px red
box-shadow: -6px -6px red
box-shadow: 6px 6px 6px red
box-shadow: 6px 6px 14px red
box-shadow: 6px 6px 6px 6px red
box-shadow: 6px 6px 6px 12px red
box-shadow: 6px 6px red inset
box-shadow: 6px 6px 16px red inset
box-shadow: 4px 4px red, -4px -4px blue
box-shadow: 6px 6px 6px red, -6px -6px 6px red
« Previous Tutorial Next Tutorial »