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)
HTML
<p class="text">
Hello <span class="color">World</span>.<br />
Some more text
</p>CSS
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 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 👇
