[css] Box-Shadow on the left side of the element only

I have been having trouble setting a box shadow on the left side of an element only.

I tried this:

box-shadow: -10px 0px 3px 0px #aaa;

However, the box shadow looks more like a grey line and lacks the regular shadow-effect that I am used to when using box-shadow. Also, the above example includes a small top box-shadow that I am trying to get rid of.

Thank you

This question is related to css

The answer is

You probably need more blur and a little less spread.

box-shadow: -10px 0px 10px 1px #aaaaaa;

Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.

This question is very, very, very old, but as a trick in the future, I recommend something like this:

    box-shadow: 0px 0px 10px #232931;
    height: 100px;
    width: 100px;
    overflow: hidden;

Basically, you have a box shadow and then wrapping the element in a div with its overflow set to hidden. You'll need to adjust the height, width, and even padding of the div to only show the left box shadow, but it works. See here for an example If you look at the example, you can see how there's no other shadows, but only a black left shadow. Edit: this is a retake of the same screen shot, in case some one thinks that I just cropped out the right. You can find it here

box-shadow: inset 10px 0 0 0 red;

box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);

The first px value is the "Horizontal Length" set to -15px to position the shadow towards the left, the next px value is set to 0 so the shadow top and bottom is centred to minimise the top and bottom shadow.

The third value(17px) is known as the blur radius. The higher the number, the more blurred the shadow will be. And then last px value -7px is The spread radius, a positive value increases the size of the shadow, a negative value decreases the size of the shadow, at -7px it keeps the shadow from appearing above and below the item.

reference: CSS Box Shadow Property

Questions with css tag:

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?