How can I add a box-shadow on one side of an element?

by

Yes, you can use the shadow spread property of the box-shadow rule: 

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>

The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

5px is the blur radius 🙂

Example for you here.

More Related Contents:

  1. Is there a ‘box-shadow-color’ property?
  2. Inner text shadow with CSS
  3. CSS Box Shadow Bottom Only [duplicate]
  4. CSS not applying on multiple instances of a custom control
  5. How can I center an absolutely positioned element in a div?
  6. CSS hover border makes inline elements adjust slightly
  7. CSS media query to target only iOS devices [duplicate]
  8. Position a CSS background image x pixels from the right?
  9. How to set up fixed width for ?
  10. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  11. Sass Invalid CSS Error: “expected expression”
  12. Google chrome a:visited background image not working
  13. Can I colour backgrounds of selected items in HTML select options with CSS only?
  14. CSS3 combining selectors with OR instead of AND
  15. What’s the difference between inline styles vs classes?
  16. What is the difference between `margin` and `padding` in CSS?
  17. Can I apply a CSS transition to the overflow property?
  18. How to change the scrollbar color using css [duplicate]
  19. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  20. Align form elements in CSS
  21. How to apply border radius in IE8 and below IE8 browsers?
  22. How to add a margin to a table row [duplicate]
  23. Clip/Crop background-image with CSS
  24. CSS negative z-index: what does it mean?
  25. How to make a Bootstrap 4 full width dropdown in Navbar?
  26. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  27. Stacking DIVs on top of each other?
  28. minmax fails (invalid property value)
  29. Div with cut out edges, border and transparent background
  30. Select specific element before other element

Leave a Comment