CSS Tool
Craft perfect box shadows with real-time preview — adjust offset, blur, spread and colour, then copy the ready-to-use CSS. Ideal for Canvas HTML Template cards, modals, buttons and hero sections.
Presets
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.12);The box-shadow CSS property adds one or more shadow effects to an element’s frame. Unlike an outline or border, box shadows do not affect layout — they are purely decorative and drawn in a separate layer behind the element. The full syntax is: h-offset v-offset blur spread color, with an optional inset keyword.
Box shadows are one of the most powerful depth tools in a UI designer’s toolkit. A subtle 0 2px 8px rgba(0,0,0,0.08) makes a card lift slightly off the page, while a stronger 0 20px 60px rgba(0,0,0,0.25) creates a dramatic modal or hero elevation.
In the Canvas HTML Template, the .card component, feature boxes, and sticky headers all rely on box shadows. You can override them using a custom <style> block or inline styles — this generator gives you the exact value to paste in.
Bootstrap 5 ships utility classes like .shadow-sm, .shadow, and .shadow-lg, but they only cover a narrow range. Custom values built with this tool let you match your brand’s precise visual language — including coloured glows, hard retro shadows, or multi-layer depth.
Select a preset to start from a proven shadow style, or begin with the sliders directly.
Adjust the Horizontal and Vertical offsets to control the shadow direction. Zero on both creates a uniform glow.
Increase Blur to soften edges. Higher values look more diffuse and natural; 0 creates a hard edge.
Use Spread to grow or shrink the shadow size independently of the element.
Toggle Inset to flip the shadow inside the element — perfect for pressed buttons or inset input fields.
Click Copy CSS and paste the value into your Canvas template's style attribute or custom CSS file.
| Name | CSS Value | Use Case |
|---|---|---|
| Subtle | 0 1px 3px rgba(0,0,0,0.08) | Lists, cards |
| Medium | 0 4px 16px rgba(0,0,0,0.12) | Modal dialogs |
| Large | 0 12px 40px rgba(0,0,0,0.2) | Dropdowns, popups |
| Inset | inset 0 2px 4px rgba(0,0,0,0.1) | Input fields |
| Coloured | 0 8px 24px rgba(26,188,156,0.35) | CTA buttons |
| Hard | 3px 3px 0 #1A1D1F | Retro/bold style |
The CSS box-shadow property adds shadow effects around an element's frame. The syntax is: box-shadow: h-offset v-offset blur spread color inset. Positive h-offset moves shadow right; positive v-offset moves it down. Blur radius softens the edge. Spread expands or contracts the shadow. The optional 'inset' keyword makes the shadow appear inside the element.
Comma-separate multiple shadow values: box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07). Layered shadows create a more realistic depth effect. The first value in the list is rendered on top.
box-shadow applies a shadow based on the element's rectangular box model, ignoring transparency. The CSS filter function drop-shadow() follows the actual painted shape of the element, including transparent areas — useful for PNG images or SVG icons with irregular shapes.
Use rgba() or hsla() for the shadow color. For example: box-shadow: 0 4px 16px rgba(0,0,0,0.12). The fourth value in rgba() is the alpha channel (0 = fully transparent, 1 = fully opaque). This prevents shadows from looking heavy and flat.
Adding the 'inset' keyword makes the shadow appear inside the element border rather than outside. Inset shadows are commonly used on input fields to give a sunken appearance, or on buttons to simulate a pressed state: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).
Canvas Builder generates production-ready Canvas HTML Template pages in seconds — with your shadows, colours and copy baked in.
Try Canvas Builder