Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

Box Shadow Effect For Card UI

Check out This Box shadow card Effect For UI using css Designed by Saijo George.

Box Shadow Card ui

Box Shadow Card ui


[code language=”html”]

<div class="card shadow1">
<h2>Shadow with 2 properties</h2>
0 5px 10px rgba(154,160,185,0.05),
0 15px 40px rgba(166,173,201,0.2);</pre>

<div class="card shadow2">
<h2>Shadow with 1 property</h2>
0 7px 30px <span class="highlight">-10px</span> rgba(150,170,180,0.5);</pre>



[code language=”css”]

body {
background: #fafafa;
font-family: Arial, sans-serif;
line-height: 1.6;

h2 {
margin-top: 0;

.card {
padding: 40px;
background: #fff;
max-width: 360px;
border-radius: 20px;
margin: 60px auto;

.highlight {
font-weight: bold;
color: #294;

.shadow1 {
box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);

.shadow2 {
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5);

CSS shadow box card Snippet