- Instant help with your CSS coding problems

Add a box shadow to only one side of an element

Snippet added on Dec 17, 2020 by Mike

Question:

How to add a box shadow to only one side of an element?

Answer:

.shadow-top {
  box-shadow: 0 -5px 3px -3px #00000030;
}

.shadow-right {
  box-shadow: 5px 0 3px -3px #00000030;
}

.shadow-bottom {
  box-shadow: 0 5px 3px -3px #00000030;
}

.shadow-left {
  box-shadow: -5px 0 3px -3px #00000030;
}

Description:

To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows:

Top shadow: offset-x: 0 and offset-y: -5px
Right shadow: offset-x: 5px and offset-y: 0
Bottom shadow: offset-x: 0 and offset-y: 5px
Left shadow: offset-x: -5px and offset-y: 0

Reference:

The box-shadow reference

Share "How to add a box shadow to only one side of an element?"

Related snippets:

Tags:

add box shadow to one side only, ad box shadow right, add box shadow left, add box shadow top, add box shadow bottom

Technical term:

Add a box shadow to only one side of an element

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS Center an absolute element in TailwindCSS How to use !important in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Add dots if text is too long Create a neon effect with TailwindCSS Access child elements in TailwindCSS Select the nth child in TailwindCSS Change bullet size in HTML Force line break in a long word using CSS Select first child in TailwindCSS Use emoji instead of list style How to use calc() in TailwindCSS How to use CSS variables in TailwindCSS Create horizontal rule with text using TailwindCSS Using :not in TailwindCSS Write vertical text in HTML

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Send JSON data with Postman Check if a value is a number in JavaScript Add CSS to content script in Manifest V3 Split editor window in VS Code Disable tooltip in VS Code Show hidden characters in VS Code Start PHP built in webserver Remove all extra spaces from a string in JavaScript Convert a string to sentence case in JavaScript Generate a random number in a range with JavaScript Solving the Uncaught SyntaxError: Cannot use import statement outside a module Get the value of selected radio button in JavaScript Duplicate line or selection in VS Code Convert timestamp to DateTime in PHP Convert hexadecimal to binary in PHP PHP regular expression tutorial Set media query in CSS Get the last day of a month in Java

Interesting things

OpanAi's ChatGPT