P11 Blazor UI Library – Bootstrap 5.3 Components

P11ShadowEffect Component

The P11ShadowEffect component offers an easy way to apply consistent box-shadow effects to any wrapped content (buttons, cards, modals). It supports predefined variants, various **sizes**, **custom shadow coloring**, and special **layering contexts**.

Note: This component is a wrapper. Place your content element (e.g., a <button> or a <div class="card">) inside the P11ShadowEffect wrapper. The shadow is applied directly to the child element.

P11ShadowEffect Component Examples

This matrix showcases the five original, commonly used shadow variants across the three available sizes.

Variant	Small (Size.Small)	Medium (Size.Medium)	Large (Size.Large)
Subtle	Small	Medium	Large
Medium (Default)	Small	Medium	Large
Lifted	Small	Medium	Large
Inset	Small	Medium	Large

Advanced & Specialized Variants

These variants offer unique effects for specific use cases like layering, movement, or modern design aesthetics.

Sharp (MD3-Style)

Sharp Layer

ZDepth (High Elevation)

High Z-Level

DoubleLayer (Rich Depth)

Complex Shadow

Ambient (Soft Glow)

Environment Light

Neumorphic (3D Press)

Soft Press

TopOnly (Header/Slot)

Top Edge Only

Interactive & Color Examples

ColorGlow

Blue Glow

Pulse (Attention)

Pulsing Red

SoftHover (Interactive)

Hover Me!

Implementation

<div class="card p-4 mb-4">
    <div class="table-responsive">
        <table class="table table-bordered text-center shadow-doc-table">
            <thead class="table-light">
                <tr>
                    <th style="width: 15%;">Variant</th>
                    <th>Small (Size.Small)</th>
                    <th>Medium (Size.Medium)</th>
                    <th>Large (Size.Large)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Subtle</th>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Subtle" Size="Size.Small">
                            <div class="p-3 bg-white rounded">Small</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Subtle" Size="Size.Medium">
                            <div class="p-3 bg-white rounded">Medium</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Subtle" Size="Size.Large">
                            <div class="p-3 bg-white rounded">Large</div>
                        </P11ShadowEffect>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Medium (Default)</th>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Medium" Size="Size.Small">
                            <div class="p-3 bg-white rounded">Small</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Medium" Size="Size.Medium">
                            <div class="p-3 bg-white rounded">Medium</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Medium" Size="Size.Large">
                            <div class="p-3 bg-white rounded">Large</div>
                        </P11ShadowEffect>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Lifted</th>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Lifted" Size="Size.Small">
                            <div class="p-3 bg-white rounded">Small</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Lifted" Size="Size.Medium">
                            <div class="p-3 bg-white rounded">Medium</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Lifted" Size="Size.Large">
                            <div class="p-3 bg-white rounded">Large</div>
                        </P11ShadowEffect>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Inset</th>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Inset" Size="Size.Small">
                            <div class="p-3 bg-light rounded border">Small</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Inset" Size="Size.Medium">
                            <div class="p-3 bg-light rounded border">Medium</div>
                        </P11ShadowEffect>
                    </td>
                    <td>
                        <P11ShadowEffect ShadowVariant="ShadowVariant.Inset" Size="Size.Large">
                            <div class="p-3 bg-light rounded border">Large</div>
                        </P11ShadowEffect>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<h3 class="mt-5">Advanced & Specialized Variants</h3>
<p>These variants offer unique effects for specific use cases like layering, movement, or modern design aesthetics.</p>

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <h6>Sharp (MD3-Style)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.Sharp" Size="Size.Medium">
            <div class="p-4 bg-white rounded text-center">Sharp Layer</div>
        </P11ShadowEffect>
    </div>
    <div class="col-md-4">
        <h6>ZDepth (High Elevation)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.ZDepth" Size="Size.Medium">
            <div class="p-4 bg-white rounded text-center">High Z-Level</div>
        </P11ShadowEffect>
    </div>
    <div class="col-md-4">
        <h6>DoubleLayer (Rich Depth)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.DoubleLayer" Size="Size.Medium">
            <div class="p-4 bg-white rounded text-center">Complex Shadow</div>
        </P11ShadowEffect>
    </div>
    <div class="col-md-4">
        <h6>Ambient (Soft Glow)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.Ambient" Size="Size.Medium">
            <div class="p-4 bg-light rounded text-center">Environment Light</div>
        </P11ShadowEffect>
    </div>
    <div class="col-md-4">
        <h6>Neumorphic (3D Press)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.Neumorphic" Size="Size.Medium">
            <div class="p-4 rounded text-center" style="background-color: #e0e0e0;">Soft Press</div>
        </P11ShadowEffect>
    </div>
    <div class="col-md-4">
        <h6>TopOnly (Header/Slot)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.TopOnly" Size="Size.Medium">
            <div class="p-4 bg-white text-center">Top Edge Only</div>
        </P11ShadowEffect>
    </div>
</div>

<br />
<hr class="border border-2 opacity-25">

<h3 class="mt-5">Interactive & Color Examples</h3>

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <h6>ColorGlow</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.ColorGlow" ShadowColor="#007bff" Size="Size.Medium">
            <div class="p-3 bg-primary text-white rounded text-center">Blue Glow</div>
        </P11ShadowEffect>
    </div>

    <div class="col-md-4">
        <h6>Pulse (Attention)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.Pulse" ShadowColor="#ff0000" Size="Size.Medium">
            <div class="p-3 bg-white rounded text-center">Pulsing Red</div>
        </P11ShadowEffect>
    </div>

    <div class="col-md-4">
        <h6>SoftHover (Interactive)</h6>
        <P11ShadowEffect ShadowVariant="ShadowVariant.SoftHover" ShadowColor="rgba(0, 123, 255, 0.4)" Size="Size.Medium">
            <div class="p-3 bg-white rounded text-center">Hover Me!</div>
        </P11ShadowEffect>
    </div>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Component API

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	`null`	Defines the wrapped content. The shadow is applied to this child element.
`ShadowVariant`	`ShadowVariant`	`ShadowVariant.Medium`	Defines the style of the shadow (e.g., `Subtle`, `Lifted`, `Pulse`, `ZDepth`). (15 Options)
`Size`	`Size`	`Size.Medium`	Defines the size/depth of the shadow (`Small`, `Medium`, `Large`).
`ShadowColor`	`string?`	`null`	Optional custom color (valid CSS value) for the shadow, which overrides the default color.
`IsLayer`	`bool`	`false`	Applies the generic `p11-shadow-layer` class to the wrapper. Use for elements that need a higher z-index or specific context, like Modals, Tooltips, or Popups.
`CssClass`	`string?`	`null`	Additional CSS classes for the wrapper.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures unmatched attributes.

Available Shadow Variants

A comprehensive list of the 15 available variants, categorized by their primary function.

Variant	Type	Description
Standard Depth / Classic
`Subtle`	Standard	A very light, barely visible shadow for subtle depth.
`Medium`	Standard	The standard shadow; a moderate depth, ideal for most UI elements.
`Lifted`	Depth	A deep, pronounced shadow that strongly highlights the element.
`Inset`	Depth	An inward-facing shadow that creates a "pressed-down" or sunken look.
Positional / Modern / Color
`ColorGlow`	Color	A luminous shadow (glow) whose color is controlled by the `ShadowColor` parameter.
`TopOnly`	Positional	Shadow applied only to the top edge (e.g., for fixed headers or elements slotted below the fold).
`BottomOnly`	Positional	A wide, soft shadow applied only to the bottom edge (e.g., for floating elements).
`Sharp`	Modern	A sharp shadow with low blur and high spread, creating a defined 'Material Design 3' layer.
`Ambient`	Modern	A highly transparent, broad shadow simulating ambient lighting, great for large containers.
Complex / Interactive / Special
`Pulse`	Interactive	An animated shadow that subtly changes intensity to draw attention.
`DoubleLayer`	Complex	Combines two distinct shadows (sharp contour + soft depth) for a rich, realistic effect.
`ZDepth`	Complex	A multi-layered shadow stack simulating maximum elevation (e.g., for major popups or Modals).
`SoftHover`	Interactive	Applies no shadow by default, but transitions to `Lifted` on hover or focus.
`Concave`	Special	A stronger version of `Inset`, simulating a deep, hollow depression in the surface.
`FocusRing`	Special	A thin, focused shadow used primarily for accessibility and custom focus indication.
`Neumorphic`	Special	Simulates a 3D soft-press or convex shape using dual light/dark shadows (requires matching background).