Creating Playful Effects With CSS Text Shadows

[nirjan-dev]

link to the post
codepen demo

The syntax is like this:

.el {
  text-shadow: [x-offset] [y-offset] [blur] [color];
}

• x-offset: Position on the x-axis. A positive value moves the shadow to the right, a negative value moves the shadow to the left. (required)
• y-offset: Position on the y-axis. A positive value moves the shadow to the bottom, a negative value moves the shadow to the top. (required)
• blur: How much blur the shadow should have. The higher the value, the softer the shadow. The default value is 0px (no blur). (optional)
• color: The color of the shadow. (required)

Let’s start creating our effect by adding just one shadow. The shadow will be pushed 6px to the right and 6px to the bottom:

:root {
  --text: #5362F6; /* Blue */
  --shadow: #E485F8; /* Pink */
}


.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow);
}

Creating depth with more shadows

All we have is a flat shadow at this point — there’s not much 3D to it yet. We can create the depth and connect the shadow to the actual text by adding more text-shadow instances to the same element. All it takes is comma-separating them. Let’s start with adding one more in the middle:

.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow),
               3px 3px var(--shadow);
}

The more steps we add, the more detailed the the end result will be. In this example, we’ll start from 6px 6px and gradually build down in 0.25px increments until we’ve reached 0.

.playful {
  color: var(--text);
  text-shadow: 
    6px 6px        var(--shadow), 
    5.75px 5.75px  var(--shadow), 
    5.5px 5.5px    var(--shadow), 
    5.25px 5.25px  var(--shadow),
    5px 5px        var(--shadow), 
    4.75px 4.75px  var(--shadow), 
    4.5px 4.5px    var(--shadow), 
    4.25px 4.25px  var(--shadow),
    4px 4px        var(--shadow),
    3.75px 3.75px  var(--shadow),
    3.5px 3.5px    var(--shadow),
    3.25px 3.25px  var(--shadow),
    3px 3px        var(--shadow),
    2.75px 2.75px  var(--shadow),
    2.5px 2.5px    var(--shadow),
    2.25px 2.25px  var(--shadow),
    2px 2px        var(--shadow),
    1.75px 1.75px  var(--shadow),
    1.5px 1.5px    var(--shadow),
    1.25px 1.25px  var(--shadow),
    1px 1px        var(--shadow),
    0.75px 0.75px  var(--shadow),
    0.5px 0.5px    var(--shadow),
    0.25px 0.25px  var(--shadow);
}

Simplifying the code with Sass

The result may look good, but the code right now is quite hard to read and edit. If we want to make the shadow larger, we’d have to do a lot of copying and pasting to achieve it. For example, increasing the shadow size to 10px would mean adding 16 more shadows manually.

And that’s where SCSS comes in the picture. We can use functions to automate generating all of the shadows.

@function textShadow($precision, $size, $color){
  $value: null; 
  $offset: 0;
  $length: $size * (1 / $precision) - 1;


  @for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }


  @return $value;
}


.playful {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
}