How to draw realistic smooth slit shadow with Pure CSS3?


Tags: css,css3,design

Problem :

How can I make a shadow effect like the one below with pure CSS?

Shadow Effect

I am new to CSS. The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!

box-shadow: 1px 1px 5px #999999 inset


Solution :

This is the closest I could get : Demo. I think it's actually not bad.

Pure CSS smooth paper-side shadow effect

It combines a black shadow and a white one on top of it.

.yourclass{
    background-color: #fff;
    box-shadow:  -15px 0px 60px 25px #ffffff inset, 
        5px 0px 10px -5px #000000 inset;
}

Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

Read the CSS Tricks article about box-shadows to get how they're used.

For two shadows (both sides) you need 4 shadows (demo) :

Result:

Pure CSS smooth paper-side shadow effect

.yourclass{
    background-color: #fff;
    box-shadow:  0px 100px 50px -40px #ffffff inset,
        0px -100px 50px -40px #ffffff inset,
        -5px 0px 10px -5px rgba(0,0,0,0.5) inset,
        5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}

Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

For more info on css shadows, read this article from CSS Tricks


    CSS Howto..

    How do I remove white space due to position relative of CSS?

    Is not showing anything, or showing “undefined”

    How can I change the colour of individual squares on this grid…?

    Show and remove “No Record Found” message in jqgrid 4.6.0

    How to close a modal box after form submit?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    CSS How to attach input box to bottom of divider window

    How to remove CSS Class in aspx pages source codes using Regex?

    How to make content shareable from a static website

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    How to make HTML table cells expand horizontally beyond end of page?

    How to include a custom CSS file in TYPO3

    How to create css code that works for all browser?

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to Reset CSS after Media Query?

    How to click and swap a text in a button?

    Manual JavaScript Slideshow with Dynamic images

    How do you style Wordpress sub-menus with CSS?

    How to get Sub Menu to right align using CSS

    How to resize button without cutting the text inside

    How to flow text from a box to another with CSS

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to make this div using html and css?

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How to have multiple css print layouts on a single page application?

    Fullpage.js: How to add css class “active” to slide anchor

    How does the CSS Block Formatting Context work?

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How to trim off Image in CSS?

    How do you deal with Internet Explorer?