Long Shadow Effect with CSS Text Shadow

Long Shadow Effect CSS | Code Architects

The long shadow effect is a popular design trend that adds depth and dimension to flat icons and illustrations. It’s a simple but effective way to make your designs stand out and add a bit of personality to your website or app. In this tutorial, we’ll show you how to create the long shadow effect with CSS.

We need some text to apply the effect to before we start applying shadows. Any text can be used for this technique, but keep in mind that simpler language usually complements the long shadow look better.

Preview (Long Shadow Effect with CSS)

Long Shadow Effect with CSS | Code Architects


<p class="text">
    Hello <span class="color">World</span>.<br />
    Some more text


We will be adding multiple shadows to create the long shadow effect. The shadow concept involves creating a shadow at each pixel value incrementing the value by 1.

$limit: 800; /* You can set the size limit of shadow color */
$shadowColor: #2d343a;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  font-family: 'Alata', sans-serif;
font-family: 'Rubik Mono One', sans-serif;
  background: #384048;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

p {
  font-size: 4.5em;
  font-weight: 700;
  color: #FFF;
  $value: ();
  @for $i from 1 to $limit {
    $value: append($value, $i+px $i+px $shadowColor, comma);
  text-shadow: $value;

span.color {
  color: #fc1258;

You can also adjust the color of the shadows to fit your design.

You can find the code on our Codepen. Read more articles on our site 👇

Leave a Comment


No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

eleven − seven =