Shadows
Shadow utilities in the Phenix Design System add depth and elevation to elements, helping establish visual hierarchy and create modern interface effects.
Overview
Shadow utilities cover:
- Box Shadows - Add depth and elevation to elements
- Text Shadows - Create dimensional text effects
- Glass Shadows Effects - Special shadows with backdrop filters for glass morphism
- Shadow Color Customization - Modify shadow colors using CSS variables
Box Shadows
Box shadows add depth and elevation to elements, helping establish visual hierarchy:
<!-- Standard elevation shadows -->
<div class="bx-shadow-dp-1">Depth 1 shadow (small)</div>
<div class="bx-shadow-dp-2">Depth 2 shadow (medium)</div>
<div class="bx-shadow-dp-3">Depth 3 shadow (standard)</div>
<div class="bx-shadow-dp-4">Depth 4 shadow (pronounced)</div>
<div class="bx-shadow-dp-5">Depth 5 shadow (heavy)</div>
<!-- Directional shadows (Y-axis) -->
<div class="bx-shadow-dp-1y">Depth 1 Y-axis shadow</div>
<div class="bx-shadow-dp-2y">Depth 2 Y-axis shadow</div>
<!-- PDS Tiered Shadows -->
<div class="bx-shadow-tw">Default tiered shadow</div>
<div class="bx-shadow-tw-sm">Small tiered shadow</div>
<div class="bx-shadow-tw-md">Medium tiered shadow</div>
<div class="bx-shadow-tw-lg">Large tiered shadow</div>
<div class="bx-shadow-tw-xl">Extra large tiered shadow</div>
<div class="bx-shadow-tw-2xl">2X large tiered shadow</div>
Glass Shadows Effects
Create glass-like effects with special shadow combinations and backdrop filters:
<!-- Glass shadow effects (increasingly pronounced) -->
<div class="bx-shadow-gls-dp-1">Glass effect 1</div>
<div class="bx-shadow-gls-dp-2">Glass effect 2</div>
<div class="bx-shadow-gls-dp-3">Glass effect 3</div>
Glass shadows include backdrop blur and complex shadow combinations for a modern glass morphism effect.
Text Shadows
Create depth and emphasis for text elements:
<!-- Standard text shadows -->
<h2 class="tx-shadow-dp-1">Depth 1 text shadow</h2>
<h2 class="tx-shadow-dp-2">Depth 2 text shadow</h2>
<h2 class="tx-shadow-dp-3">Depth 3 text shadow</h2>
<h2 class="tx-shadow-dp-4">Depth 4 text shadow</h2>
<h2 class="tx-shadow-dp-5">Depth 5 text shadow</h2>
<!-- Directional text shadow -->
<h2 class="tx-shadow-dp-1y">Directional Y-axis text shadow</h2>
<!-- PDS Tiered Text Shadows -->
<h2 class="tx-shadow-tw">Default tiered text shadow</h2>
<h2 class="tx-shadow-tw-sm">Small tiered text shadow</h2>
<h2 class="tx-shadow-tw-md">Medium tiered text shadow</h2>
<h2 class="tx-shadow-tw-lg">Large tiered text shadow</h2>
<h2 class="tx-shadow-tw-xl">Extra large tiered text shadow</h2>
<h2 class="tx-shadow-tw-2xl">2X large tiered text shadow</h2>
Shadow Color Customization
You can customize shadow colors using CSS variables:
<!-- Custom shadow colors -->
<div class="bx-shadow-dp-3" style="--shadow-color-dark: 65,105,225;">
Blue-tinted shadow
</div>
<div class="bx-shadow-dp-3" style="--shadow-color-dark: 220,53,69;">
Red-tinted shadow
</div>
Responsive Shadow Utilities
The standard shadow utilities (bx-shadow-*
, tx-shadow-*
) do not have built-in responsive variants like -md
or -lg
.
If you need to apply different shadows at different screen sizes, you would typically achieve this by:
- Using utility classes within responsive containers: Apply different shadow classes to elements that are themselves shown or hidden at different breakpoints using display utilities (e.g.,
hidden md-block
). - Custom CSS: Define your own CSS rules using media queries to apply different
--box-shadow
ortext-shadow
values at various breakpoints. - JavaScript: Dynamically add or remove shadow classes based on screen size or other conditions.