css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.