1

The transition of the box-shadow makes fade in/out effect of the box shadow. It is visible when you set a slow transition.

Is possible to remove this fade effect, that shadow appears only by x and y position?

Example: https://codepen.io/crowscript/pen/yLvpKNa

CrowScript
  • 155
  • 2
  • 8
  • 1
    Do you mean you want the shadow to appear instantly without a transition? If so you can just remove `transition: box-shadow 2s ease-out;` – omid May 27 '22 at 11:37

2 Answers2

3

If you want to remove the transition completely, you can delete this line:

transition:box-shadow 2s ease-out

Or if you want to keep the transition but have it fade-in in place, you need to set the shadow on the element then transition the colour:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease-out;
  box-shadow: 1rem 1rem 0 0 transparent;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}
<a href="#">
    Test link
</a>
omid
  • 1,146
  • 1
  • 7
  • 17
2

If you pre-define the box-shadow on the initial element, it will not have the fade effect. See my example:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease;
  box-shadow: .01rem .01rem 0 0 #c00000;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}
<div class="wrap">
  <a href="#">
      Test link
  </a>
</div>
treckstar
  • 1,956
  • 5
  • 21
  • 26