Handytool
डेवलपरमुफ़्तस्थानीय रूप से चलता है

CSS box-shadow generator

CSS box-shadow values को live preview के साथ design करें — offsets, blur, spread, opacity, और inset।

प्रीव्यू
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Shadow को डिज़ाइन करने के लिए sliders समायोजित करें — जब सही दिखे तो CSS कॉपी करें।

CSS box-shadow generator के बारे में

Handytool का box-shadow generator आपको offset, blur, spread, color, और opacity के लिए sliders देता है — और एक live preview card जो आप drag करते समय update होता है। Inset shadows को toggle करें, color picker के via एक color को dial करें, और resulting box-shadow CSS declaration को अपने stylesheet में सीधे copy करें। पूरा tool आपके browser में चलता है; कुछ नहीं upload होता।

CSS box-shadow generator की विशेषताएँ

  • 01

    हर parameter एक slider के रूप में

    Horizontal और vertical offsets, blur radius, spread radius, और opacity का हर एक अपना slider है plus एक numeric input — drag से fine-tune करें, फिर keyboard से nudge करें pixel precision के लिए।

  • 02

    Inset shadows supported

    Inset toggle को flip करें एक drop shadow से एक inner shadow में switch करने के लिए — pressed buttons, sunken inputs, और neumorphic surfaces के लिए useful।

  • 03

    Color + opacity, separately

    किसी भी hex value में base color को pick करें, फिर opacity को independently adjust करें। Output rgba() का उपयोग करता है इसलिए color और alpha readable रहते हैं जब आप CSS को copy करते हैं।

CSS box-shadow generator अक्सर पूछे जाने वाले प्रश्न

Spread value क्या करता है?
Positive spread shadow को सभी directions में blur के applied होने से पहले enlarge करता है; negative spread इसे shrinks करता है। यह tight, defined glows के लिए useful है जब एक small blur के साथ paired हो।
क्या मैं कई shadows add कर सकता हूँ?
यह generator एक single shadow declaration output करता है। Shadows को layer करने के लिए, value को copy करें, फिर इसे अपने CSS में comma से separated दो बार paste करें — box-shadow एक comma-separated list को accept करता है।
मेरा inset shadow क्यों invisible है?
Inset shadows element के अंदर draw करते हैं, इसलिए उन्हें एक background color या padding की जरूरत है visible होने के लिए। वे भी transparent या zero-sized elements पर नहीं दिखेंगे।
क्या preview pixel-accurate है?
हाँ — preview एक real element पर actual CSS box-shadow property का उपयोग करता है, इसलिए जो आप देखते हैं वह बिल्कुल है जो आपकी stylesheet render करेगी।

संबंधित टूल

डेवलपर →

अन्य टूल्स देखें

सभी टूल →