JSFiddle - React, Tailwind, and code Playground

градиенты и тени

by hronic

HTML

<div class="container">
<div class="drop-shadow lifted">
            <p>Lifted corners</p>
</div></div>

<br><br><br><br><br><br><br><br><br><br>

<div class='block shadow'>
<p>Block</p>
</div>
<br>
<hr>

CSS

.container {
  position:relative;           
  z-index:1;
}        
        
.drop-shadow {
  position:relative;
  float:left;
  width:40%;    
  padding:1em; 
  margin:2em 10px 4em; 
  background:#fff;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before, .drop-shadow:after {
  content:"";
  position:absolute; 
  z-index:-2;
}
        
.drop-shadow p {
  font-size:16px;
  font-weight:bold;
}

.lifted {border-radius:4px;}
        
.lifted:before,  .lifted:after { 
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);    
  -moz-transform:rotate(-3deg);   
  -ms-transform:rotate(-3deg);   
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
        
.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
-moz-transform:rotate(3deg);  
-ms-transform:rotate(3deg);  
-o-transform:rotate(3deg);
transform:rotate(3deg);
}     

/*--- block shadow----*/
.block {
  border: 1px solid black;
  position: relative;
  width: 300px;
  background:#fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0,0,0,0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2) inset;
}
.block:before, .block:after {
  content: "";
  position: absolute;
  z-index: -2;
}

.shadow:before, .shadow:after {
  bottom: 13px;
  left: 15px;
  width: 50%;
  height: 20%;
  max-width: 200px;
  box-shadow: 0 15px 5px rgba(0,0,0,0.7);
  transform: rotate(-3deg);
}
.shadow:after {
  right:15px;
  left: auto;
  transform: rotate(3deg);
}

.block p {
 margin: 10px;
 text-align: center;
 }

/*--- hr ----*/
hr{
  color: #fff;
}