Photoshop Question posted in
The official user guide can be found here.

Converting Boxshadow from Photoshop to CSS

I am trying to get the same result in CSS as in Photoshop but whatever I try I can’t get the same sharp effect with CSS. I tried the CSS Photoshop as well as playing around with different values, it always blurs at the edges.

.c-depot {
  margin-bottom: 24px;
  text-align: center;
}

.c-depot__box {
  align-items: center;
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  padding: 24px 0;
  width: 250px;
}

.c-depot__box--shadow {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
}

.c-depot__box--shadow-mid {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
}
<div class="c-depot">
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">1</h3>
    <h3 class="c-depot__headline">Formular ausfüllen</h3>
    <p class="c-depot__quote">ganz einfach online</p>
    <div class="c-depot__icon">

    </div>
  </div>
  <div class="c-depot__box--shadow-mid c-depot__box">
    <h3 class="c-depot__step">2</h3>
    <h3 class="c-depot__headline">Verifizieren</h3>
    <p class="c-depot__quote">ganz einfach von Zu Hause aus</p>
    <div class="c-depot__icon">
    </div>
  </div>
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">3</h3>
    <h3 class="c-depot__headline">Loslegen</h3>
    <p class="c-depot__quote">ganz einfach Rendite einfahren</p>
    <div class="c-depot__icon">

    </div>
  </div>

https://codepen.io/HendrikEng/pen/EmNKvO

This is how it should look. Thanks a lot guys.

enter image description here

Tags:

2

Answers


  1. 0

    I know the problem and it can be really diffcult to achieve the perfect shadow. I would recommend to use generators like this one to create the shadow.

    Also you should set the background-color to white for the .c-depot__box.

    Login or Signup to reply.
  2. 0

    Try overlapping the columns a bit and give it a border.

    Tip: In Chrome Dev tool (F12) you can edit the box-shadow easily by clicking the purple icon.

    https://codepen.io/anon/pen/oWYLvj

    .c-depot {
  margin-bottom: 24px;
  text-align: center;
}

.c-depot__box {
  border:1px solid #e2e2e2;
  align-items: center;
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  padding: 24px 0;
  width: 250px;
  background-color: #fff;
}

.c-depot__box--shadow {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
}

.c-depot__box--shadow-mid {
  -webkit-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  margin-left:-5px;
}

.c-depot__box--shadow.last{
  margin-left:-5px;
  -webkit-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
}
    <div class="c-depot">
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">1</h3>
    <h3 class="c-depot__headline">Formular ausfüllen</h3>
    <p class="c-depot__quote">ganz einfach online</p>
    <div class="c-depot__icon">

    </div>
  </div>
  <div class="c-depot__box--shadow-mid c-depot__box">
    <h3 class="c-depot__step">2</h3>
    <h3 class="c-depot__headline">Verifizieren</h3>
    <p class="c-depot__quote">ganz einfach von Zu Hause aus</p>
    <div class="c-depot__icon">
    </div>
  </div>
  <div class="c-depot__box--shadow c-depot__box last">
    <h3 class="c-depot__step">3</h3>
    <h3 class="c-depot__headline">Loslegen</h3>
    <p class="c-depot__quote">ganz einfach Rendite einfahren</p>
    <div class="c-depot__icon">

    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search