Solution 1 :

Yes it’s possible, I recommend that you learn box-shadow property first, and play with the div tag.
the syntax for that is:

box-shadow: x-direction y-direction blur color;

here’s my attempt

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        * {
            margin: 0;
            padding: 0;
        .top-shadow {
            margin-top: 100px;
            background-color: white;
            height: 100px;
            box-shadow: 0 10px 10px #C0B6B6;

        .right-shadow {
            box-shadow: 3px 1px 1px #C0B6B699;
            height: 1000px;
            margin: -100px;
            width: 80%;

    <div class="top-shadow"></div>
    <div class="right-shadow"></div>


enter image description here

hope that it’s help

Solution 2 :

Yes There is possible of do that . In internet there are different tools show you could generate any kind of shadow and edit as you want .

    <div id="demoObject">Edit this text</div>

Here is just a example 
#demoObject {
  margin: 10%;
  width: 500px;
  height: 100px;
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, -14px 50px 0px 29px rgba(0,0,0,0); 
box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, -14px 50px 0px 29px rgba(0,0,0,0);
background: #ECEFCF;
body#tinymce {
background: #FFFFFF

here is a link where you can generate different kin of box shadow

Problem :

Is it possible to make bellow by css?. I’m trying to use box shadow but 2 days with no result , please help me

enter image description here


Comment posted by tacoshy

Yes its possible. All you need are pseudo element… however you should be long enough around to know the SO guidelines. What have you tried? what wasnt working? where is your code? Where are you actually stuck?