Box Shadow जनरेटर
सुंदर छाया को दृश्य रूप से बनाएँ और CSS कॉपी करें।
प्रीसेट
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
कैसे उपयोग करें
- क्षैतिज और लंबवत ऑफ़सेट, ब्लर, स्प्रेड और अपारदर्शिता समायोजित करने के लिए स्लाइडर खींचें।
- छाया का रंग चुनें और आवश्यकता अनुसार "inset" सक्षम करें।
- कई छायाएँ स्टैक करने के लिए "छाया परत जोड़ें" पर क्लिक करें।
- त्वरित शुरुआत के लिए प्रीसेट का उपयोग करें।
- परिणाम को अपनी स्टाइलशीट में पेस्ट करने के लिए "CSS कॉपी करें" पर क्लिक करें।
अक्सर पूछे जाने वाले प्रश्न
CSS में box-shadow क्या है?
CSS box-shadow प्रॉपर्टी किसी तत्व के चारों ओर छाया प्रभाव जोड़ती है। यह क्षैतिज ऑफ़सेट, लंबवत ऑफ़सेट, ब्लर त्रिज्या, स्प्रेड त्रिज्या और रंग के लिए मान लेती है।
क्या मैं कई छायाएँ जोड़ सकता हूँ?
हाँ। दूसरी छाया जोड़ने के लिए «छाया परत जोड़ें» पर क्लिक करें। CSS आउटपुट में कई छायाएँ अल्पविराम से अलग होती हैं। यह जटिल परतदार प्रभाव बनाने की अनुमति देता है।
inset कीवर्ड किस लिए है?
«inset» जोड़ने से छाया तत्व के अंदर दिखाई देती है, बाहर की बजाय, एक आंतरिक छाया या «दबे हुए» प्रभाव का निर्माण करती है।
The five parameters of box-shadow
CSS box-shadow attaches one or more drop-shadow effects to an element's border box. The grammar is box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, with multiple shadows comma-separated. Each parameter does one specific thing:
- offset-x: distance the shadow is shifted horizontally. Positive moves right; negative moves left.
0centres horizontally. - offset-y: vertical shift. Positive moves down (mimics overhead lighting, the most common UI convention). Negative moves up.
- blur-radius: how far the shadow's edge fades to transparent. Implemented as a Gaussian convolution; larger values produce softer, larger, more diffuse shadows. Negative values are invalid;
0produces a hard, sharp edge. - spread-radius: grows (positive) or shrinks (negative) the shadow shape before the blur is applied. Positive spread expands the shadow in every direction; negative contracts it, letting you confine a shadow to one side of the box.
- color: defaults to
currentcolor(the element's owncolorvalue, which is occasionally surprising). UI shadows almost always use a black or near-black with low alpha,rgba(0,0,0,0.05)torgba(0,0,0,0.25): because solid-black shadows look heavy and unnatural. - inset keyword, paints the shadow inside the box instead of outside. Used for pressed-button states, recessed input "wells," and inner glows.
The browser composites a list of shadows front-to-back: the first-listed shadow is closest to the viewer, the last is furthest back. This is the same ordering as text-shadow and background, but it's the opposite of how most CSS rules cascade, a common surprise for new authors.
Material Design's two-shadow elevation system
Google's Material Design (introduced May 2014; Material Design 3 in 2021) defines a quantised elevation system in which UI surfaces sit at one of several density-independent pixel levels. The shadow recipe at every level uses two stacked shadows:
- Umbra (key shadow), smaller, darker, representing the directly-blocked light beneath the surface. Short offset and blur.
- Penumbra (ambient shadow), larger and more diffuse, representing scattered light bouncing around the room. Larger offset, larger blur, lighter alpha.
In Material Design 2, elevation values run from 0dp (no shadow) through 24dp; cards typically use 1–2dp at rest and animate to 8dp on hover, while modal dialogs use 24dp. Material Design 3 condensed the scale to five named Levels (1 through 5) and added tinted overlays in addition to drop shadows on dark themes. The umbra-plus-penumbra structure remains the visual model, and it's why Tailwind's shadow-md ships as two stacked shadows: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).
Neumorphism: the trend that needed two opposing shadows
Neumorphism (a portmanteau of "new" and "skeuomorphism") rose to viral popularity in late 2019 / early 2020 after a December 2019 Dribbble post by Ukrainian designer Alexander Plyuto titled "Skeuomorph Mobile Banking" collected tens of thousands of likes within weeks. The defining recipe is two box-shadows on an element with the same background colour as its parent: a darker shadow on the bottom-right and a lighter shadow on the top-left. The dark side simulates the surface receding away from a light source; the light side simulates it lifting into a highlight on the side facing the light. Inverting the offsets (or adding inset to both) creates a recessed/pressed appearance.
Honest accessibility caveat: neumorphism has been widely criticised because the visual contrast between an element and its background is necessarily very low, they share a colour. Buttons and inputs can fail WCAG 1.4.11 (Non-text Contrast, AA, 3:1 ratio of UI components against adjacent colours). Pressed and unpressed states are often only distinguishable by subtle shadow direction, which screen readers cannot convey and which is invisible to anyone with low vision, colour blindness, or screen glare. Use the style sparingly on decorative surfaces, not primary controls.
box-shadow vs filter: drop-shadow()
CSS Filter Effects defines an alternative, filter: drop-shadow(<x> <y> <blur> <color>): that looks visually similar but with a critical difference. box-shadow casts a shadow of the border box rectangle (rounded by border-radius if any). drop-shadow casts a shadow of the alpha channel of the rendered element, including children, transparent PNGs, SVG shapes with cutouts, masked content. The most common reason to choose drop-shadow is that the element you want to shadow is not a rectangle, a transparent PNG icon, an SVG logo, a speech-bubble triangle.
box-shadow | drop-shadow() | |
|---|---|---|
| Spread parameter | Yes | No |
| Inset variant | Yes | No |
| Multiple shadows | Yes (comma list) | Yes (chain filters) |
| Affects descendants | No | Yes (whole subtree) |
| Clipping | Can extend outside overflow:hidden | Confined to filter bounds |
| Performance | Compositor-friendly | Triggers a filter pass |
Performance notes
Box-shadow is one of the more expensive CSS properties to render in real time. The cost has three drivers: blur kernel size (the Gaussian blur is a separable two-pass convolution; doubling the blur quadruples per-pixel work, so a 100-pixel blur on a large card can drop frame rate noticeably during scroll), shadow surface area (the rectangle expanded by spread and grown further by blur is what the GPU has to rasterise, large modal-overlay shadows are the most expensive kind), and repaints (animating box-shadow triggers a repaint of the shadow region every frame).
Practical recommendations:
- For hover-elevation animations, prefer animating
transform: translateY()andopacityrather thanbox-shadow. These are GPU-accelerated and don't trigger paint. - For shadow-swap on hover, declare both shadows on a pseudo-element with the larger one at
opacity: 0, then animate the pseudo-element's opacity. This swaps shadows without animating the blur kernel itself, Tobias Ahlin's "Shadow Tricks" (2017) is the canonical write-up. will-change: transformcan hint the browser to promote an element to its own compositor layer. Use sparingly, promoting many elements wastes GPU memory.- Avoid box-shadow on elements that contain large amounts of scrolling content. Each scroll frame has to repaint the shadow.
Accessibility
Shadows are decorative as far as the accessibility tree is concerned (screen readers ignore them) but they have implications:
- WCAG 1.4.11 Non-text Contrast (AA, 3:1). If a card or button is distinguished from its background only by a shadow, that shadow effectively defines the visual edge, and a faint
rgba(0,0,0,0.05)shadow on a near-white background may not meet the 3:1 threshold. Many design systems double up shadow plus a 1px solid border to guarantee the contrast. - Focus indicators.
box-shadow: 0 0 0 3px <color>is the modern alternative to the browser defaultoutlinebecause it followsborder-radius. The ring must meet WCAG 2.4.7 Focus Visible, minimum 2 CSS pixels thick, with 3:1 contrast against the unfocused state and adjacent colours. - Forced-colors / Windows High Contrast. In
forced-colors: activemode, browsers ignore most CSS colours and re-colour content with the user's system palette. Box-shadows are stripped or reduced; UI states should always have a non-shadow indicator (border change, colour change, icon, text label) for these users. - Reduced motion. Users with
prefers-reduced-motion: reduceshould not see large shadow animations on hover or scroll. Wrap animated transitions in a media query and hold the resting shadow for these users.
Quick recipes
| Effect | CSS |
|---|---|
| Subtle card lift | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| Soft modern card | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| Heavy modal lift | 0 25px 50px -12px rgba(0,0,0,0.25) |
| Sharp 1px stamp | 0 0 0 1px rgba(0,0,0,0.05) |
| Focus ring (3px) | 0 0 0 3px rgba(59,130,246,0.5) |
| Inset input "well" | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| Glow halo | 0 0 20px 4px rgba(99,102,241,0.6) |
More questions
Why is my shadow being clipped?
Almost always because an ancestor element has overflow: hidden. The shadow extends beyond the border box but is clipped at the ancestor's edge. Two fixes: lift the shadow onto the ancestor itself, or use a wrapping element without overflow clipping. filter: drop-shadow() doesn't have this issue but it has its own trade-offs.
Should I still use vendor prefixes like -webkit-box-shadow?
No. Unprefixed box-shadow has been universally supported since around 2012. Vendor prefixes are pure noise in 2026 code and should be stripped. CSS reset libraries from the early 2010s often shipped them defensively; modern code can drop them safely.
How do I apply a shadow to text, not the box?
Use text-shadow, which has the same offset / blur / colour syntax but no spread or inset. For glyph-shaped shadows on stylised text (e.g. background-clip: text gradient text), filter: drop-shadow() on the parent is the right tool, box-shadow would cast a rectangular shadow behind the glyphs.
Why doesn't my 0 0 0 2px shadow look soft?
Because the third value (blur radius) is 0. A spread-only shadow with no blur produces a sharp solid outline, which is exactly what you want for focus rings and "fake outline" tricks but not for soft elevation. Add some blur: 0 0 4px 0 rgba(0,0,0,0.2).
Does anything get sent to a server?
No. The preview rerenders in your browser as you drag the sliders; the CSS string is generated locally; copying writes to your clipboard. The page works offline once it's loaded.