user profile image

This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows.

@include text3d($primary, $depth: 5, $shadowsteps: 5, $shadowincrementer: 5px, $shadowopacity: .2, $primaryshadowcolour: #000, $lighting: $LIGHTING_CEIL)


  • $primary
  • $depth
    • A number representing the depth of the effect. Controls how "tall" the text looks.
    • default: 5
  • $shadowsteps
    • the number of shadow steps. The first three shadows are predefined and provide a bit of a shadow nimbus.
    • default : 5
  • $shadowincrementer
    • The distance between shadows
    • default: 5px
  • $shadowopacity
    • The opacity of all of the shadows
    • default : .2
  • $primaryshadowcolour
    • A colour value representing the primary shadow colour
    • default: #000
  • $lighting
    • A lighting type to use, this changes the appearance of the gradient slightly. This can be one of:
      • $LIGHTING_FLOOR This creates a gradient from the "floor" up. This sort of gives the appearance of bounced lighting.
      • $LIGHTING_CEIL This is the default and feels the most natural in the majority of circumstances
      • $LIGHTING_FLAT This removes any gradients and makes the "sides" of the text a uniform colour


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.