Can we use box-shadow to create stretched shadow?

Is it possible to create a stretched shadow for any element in html using box-shadow like in shared image.

8 Replies

you can, but if you're using regular CSS it's a bit annoying 😅 https://codepen.io/kevinpowell/pen/xxQpMox/a56b39ab438ee1ad13e3e448abd53e5e A lot easier with Sass 😅

Kevin Powell•2y ago

https://codepen.io/kevinpowell/pen/YzRYBoG/a1f165a9f1fb7c66d148edc34ffde6a3?editors=1100

Kevin

CodePen

YzRYBoG

...

Rägnar O'ock•2y ago

good old "add a shadow for each pixel of length you need"

Tok124 (CSS Nerd)•2y ago

You can also create a sass function like this

@function shadow($color, $repeats) {
  $value:();
  @for $i from 1 through $repeats {
    $value:append($value, #{$i}px #{$i}px #{$color}, comma);
  }
  @return $value;
}

@function shadow($color, $repeats) {
  $value:();
  @for $i from 1 through $repeats {
    $value:append($value, #{$i}px #{$i}px #{$color}, comma);
  }
  @return $value;
}

If you want to use it on multiple places So then you can use it like text-shadow:shadow(#000, 30);

Joao•2y ago

That is such a cool trick!

AparAwasthiOP•2y ago

Thanks @Kevin @tok124 , but now it makes me think that if shadow is an efficient way to create this effect?

Rägnar O'ock•2y ago

Outside of using an svg (or maybe a special font... But i'm not sure if it's possible or not) there's hardly any other way

AparAwasthiOP•2y ago

Thank you guys

Gaming

Programming

Can we use box-shadow to create stretched shadow?

Did you find this page helpful?