CSS Text-Shadow जेनरेटर
नयालाइव प्रीव्यू के साथ CSS text shadow ट्यून करें और कोड कॉपी करें।
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
लाइव प्रीव्यू के साथ CSS टेक्स्ट शैडो डिज़ाइन करें
यह CSS टेक्स्ट शैडो जेनरेटर आपको डेप्थ, ग्लो और आउटलाइन इफेक्ट विज़ुअली डिज़ाइन करने और प्रोडक्शन-रेडी CSS कॉपी करने की सुविधा देता है। बड़े प्रीव्यू में सीधे क्लिक करके अपना टेक्स्ट टाइप करें, ऑफसेट, ब्लर और ओपेसिटी स्लाइडर्स खींचें, रंग चुनें और देखें कि text-shadow रियल टाइम में आपके टेक्स्ट पर कैसे अपडेट होता है।
फ़ॉन्ट फैमिली, साइज़ और वेट बदलें, टेक्स्ट रंग सेट करें और बैकग्राउंड को लाइट, ग्रे, डार्क और चेकरबोर्ड के बीच टॉगल करें — यह देखने के लिए कि विभिन्न सतहों पर आपका शैडो कैसा दिखता है। नियॉन टेक्स्ट और ग्लोइंग टेक्स्ट इफेक्ट के लिए यह खासतौर पर ज़रूरी है, क्योंकि ये डार्क बैकग्राउंड पर ही सही दिखते हैं।
text-shadow सिंटैक्स, समझाया गया
एक CSS शैडो इस तरह लिखा जाता है: text-shadow: offset-x offset-y blur-radius color। offset-x और offset-y शैडो को क्षैतिज और ऊर्ध्वाधर रूप से मूव करते हैं (नेगेटिव वैल्यू से ऊपर या बाएं), blur-radius एज को नरम करता है (0 से तेज रहता है) और color टोन सेट करता है — आमतौर पर सब्टल डेप्थ के लिए सेमी-ट्रांसपेरेंट काला या ग्लो के लिए चमकीला रंग।
एक क्लासिक पठनीय शैडो है text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)। दोनों ऑफसेट 0 करें और ब्लर बढ़ाएं तो टेक्स्ट के चारों ओर सॉफ्ट हेलो बनेगा। चमकीले रंग जैसे #00eaff के साथ बढ़ते ब्लर वैल्यू से नियॉन ग्लो बनता है।
मल्टीपल शैडो स्टैक करें: नियॉन, 3D, आउटलाइन और लॉन्ग शैडो
text-shadow की असली ताकत स्टैकिंग में है। आप एक ही डिक्लेरेशन में कॉमा से अलग करके मल्टीपल टेक्स्ट शैडो लिस्ट कर सकते हैं। एक ही चमकीले रंग के बढ़ते ब्लर वाले शैडो स्टैक करने से नियॉन / ग्लोइंग टेक्स्ट इफेक्ट बनता है; नीचे और दाएं गहरे रंगों में ऑफसेट बढ़ाने से 3D एक्सट्रूडेड टेक्स्ट बनता है; दस या ज़्यादा लेयर में फ्लैट ऑफसेट दोहराने से लॉन्ग शैडो और चार से आठ हार्ड ऑफसेट से आउटलाइन टेक्स्ट बनता है।
प्रीसेट गैलरी — Soft, Neon, Glow, 3D, Long shadow, Outline, Retro, Fire और Letterpress — को शुरुआती बिंदु के रूप में उपयोग करें।
CSS, Tailwind या React Native कॉपी करें
अपने प्रोजेक्ट की ज़रूरत के अनुसार एक्सपोर्ट करें। CSS कॉपी करें से स्टैंडर्ड text-shadow डिक्लेरेशन मिलती है; Tailwind कॉपी करें से [text-shadow:2px_2px_4px_#00000066] जैसी आर्बिट्ररी प्रॉपर्टी क्लास जेनरेट होती है जो Tailwind v4 के नेटिव text-shadow-* यूटिलिटीज़ के साथ काम करती है; और React Native कॉपी करें से पहली लेयर textShadowColor, textShadowOffset और textShadowRadius में बदल जाती है।
ब्राउज़र कंपैटिबिलिटी की अच्छी खबर: text-shadow पूरी तरह स्टैंडर्डाइज़्ड है और किसी भी मॉडर्न ब्राउज़र में -webkit- या -moz- प्रीफ़िक्स की ज़रूरत नहीं।
CSSmatic, css.generator.cool और अन्य टूल्स से तुलना
ज़्यादातर ऑनलाइन CSS टेक्स्ट शैडो टूल्स एक ही शैडो लेयर हैंडल करते हैं। CSSmatic का टेक्स्ट-शैडो सेक्शन स्लाइडर्स का सेट देता है — बेसिक शैडो के लिए उपयोगी, लेकिन नियॉन या 3D इफेक्ट के लिए लेयर्स स्टैक करना मैन्युअली करना पड़ता है।
UtiloKit मल्टी-लेयर स्टैकिंग, नौ प्रीसेट जो एक क्लिक में पूरा शैडो स्टैक लोड करते हैं, एडिटेबल लाइव प्रीव्यू, तीन फॉर्मेट (CSS, Tailwind, React Native) में वन-क्लिक कॉपी और शेयरेबल URL — बिना रजिस्ट्रेशन और बिना अपलोड के — सब एक साथ देता है।
text-shadow बनाम box-shadow
यह आम भ्रम का विषय है: text-shadow अक्षरों के आउटलाइन को फॉलो करता है, जबकि box-shadow एलिमेंट की आयताकार बॉक्स को। text-shadow में न स्प्रेड रेडियस है न inset कीवर्ड — इसलिए box-shadow के विपरीत, टेक्स्ट शैडो इनसेट नहीं हो सकता। हेडिंग, लोगो और लेबल के लिए text-shadow और कार्ड व बटन के लिए box-shadow उपयोग करें।
टेक्स्ट में इनसेट या स्टैम्प्ड लुक बनाने के लिए ट्रिक है — डार्क टेक्स्ट के ठीक नीचे एक हल्का शैडो (Letterpress प्रीसेट देखें)। मोटे टेक्स्ट आउटलाइन के लिए -webkit-text-stroke प्रॉपर्टी आठ डायरेक्शनल शैडो स्टैक करने से बेहतर है।
पठनीय शैडो के टिप्स — और प्राइवेसी
शैडो एक स्टाइलिस्टिक टच है, कॉन्ट्रास्ट का विकल्प नहीं। फोटो पर टेक्स्ट के लिए 0 1px 3px rgba(0, 0, 0, 0.5) जैसा लो-ओपेसिटी शैडो पठनीयता बेहतर करता है बिना ध्यान भटकाए। भारी नियॉन और 3D इफेक्ट बड़े डिस्प्ले हेडिंग के लिए रखें।
न कुछ इंस्टॉल करना है, न अकाउंट बनाना। हर प्रीव्यू और हर CSS लाइन आपके ब्राउज़र में लोकली बनती है — आप जो टेक्स्ट टाइप करें वह कभी आपका डिवाइस नहीं छोड़ता।
Frequently asked questions
टेक्स्ट शैडो कैसे लगाएं?
किसी भी टेक्स्ट एलिमेंट में CSS property text-shadow जोड़ें। शॉर्टहैंड है text-shadow: offset-x offset-y blur-radius color — उदाहरण के लिए text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) एक सॉफ्ट शैडो 2px दाएं और 2px नीचे 4px ब्लर के साथ डालता है।
CSS में text-shadow क्या है?
text-shadow वह CSS property है जो एलिमेंट के टेक्स्ट के पीछे एक या अधिक शैडो पेंट करती है। हर शैडो चार वैल्यू लेता है: हॉरिज़ॉन्टल ऑफसेट (X), वर्टिकल ऑफसेट (Y), वैकल्पिक ब्लर रेडियस और रंग — जैसे text-shadow: 1px 1px 2px #000000।
CSS में शैडो कैसे जोड़ें?
टेक्स्ट के लिए, एलिमेंट रूल में text-shadow उपयोग करें, जैसे h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }। बॉक्स, कार्ड और बटन के लिए box-shadow उपयोग करें।
डिज़ाइन में टेक्स्ट पर शैडो कैसे डालें?
Figma, Sketch या Photoshop में टेक्स्ट लेयर पर Drop Shadow इफेक्ट जोड़ें और X/Y ऑफसेट, ब्लर और रंग सेट करें। ये चार वैल्यू CSS में लगभग एक-एक मैप होती हैं: Figma X 2, Y 2, Blur 4, ब्लैक 40% = text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)।
ग्लोइंग या नियॉन टेक्स्ट इफेक्ट कैसे बनाएं?
नियॉन ग्लो एक ही चमकीले रंग के कई शैडो का स्टैक है, ज़ीरो ऑफसेट और बढ़ते ब्लर के साथ। उदाहरण: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; सफेद टेक्स्ट पर डार्क बैकग्राउंड के साथ। यहां Neon प्रीसेट लोड करें।
3D टेक्स्ट या लॉन्ग शैडो कैसे बनाएं?
दोनों इफेक्ट बिना ब्लर के ऑफसेट वाले मल्टीपल शैडो उपयोग करते हैं। 3D एक्सट्रूडेड टेक्स्ट के लिए नीचे-दाएं गहरे होते रंग में लेयर्स स्टैक करें। 3D और Long shadow प्रीसेट यह लेयर स्टैक आपके लिए बनाते हैं।
text-shadow से आउटलाइन टेक्स्ट कैसे बनाएं?
टेक्स्ट के चारों तरफ ब्लर 0 के साथ चार (या आठ) हार्ड शैडो रखें। उदाहरण: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; सफेद टेक्स्ट को पतला डार्क आउटलाइन देता है।
मल्टीपल टेक्स्ट शैडो कैसे बनाएं?
एक ही text-shadow डिक्लेरेशन में कॉमा से अलग करें: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;। ब्राउज़र उन्हें क्रम से पेंट करता है। इस तरह नियॉन, 3D, फायर और आउटलाइन इफेक्ट बनते हैं।
क्या text-shadow inset हो सकता है?
नहीं। box-shadow के विपरीत, text-shadow में inset कीवर्ड या स्प्रेड रेडियस नहीं है। लाइट बैकग्राउंड पर एनग्रेव्ड लुक के लिए डार्क ग्रे टेक्स्ट के ठीक नीचे एक हल्का शैडो जोड़ें, जैसे text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);।
Tailwind CSS में टेक्स्ट शैडो कैसे बनाएं?
Tailwind CSS v4 में नेटिव text-shadow utilities हैं (text-shadow-sm, text-shadow-md, text-shadow-lg)। कस्टम वैल्यू के लिए आर्बिट्ररी प्रॉपर्टी उपयोग करें जहां स्पेस अंडरस्कोर बन जाते हैं: class="[text-shadow:2px_2px_4px_#00000066]"।
क्या text-shadow के लिए -webkit- या -moz- प्रीफ़िक्स चाहिए?
नहीं। text-shadow पूरी तरह स्टैंडर्डाइज़्ड है और सभी मॉडर्न ब्राउज़र में बिना प्रीफ़िक्स के काम करता है, इसलिए सिर्फ text-shadow: 1px 1px 2px #000; काफी है।
text-shadow और box-shadow में क्या फर्क है?
text-shadow ग्लिफ (अक्षरों) की आकृति से शैडो डालता है, जबकि box-shadow एलिमेंट की आयताकार बॉक्स से। text-shadow में स्प्रेड रेडियस या inset ऑप्शन नहीं है; box-shadow में दोनों हैं।
पठनीयता सुधारने के लिए सब्टल शैडो कैसे जोड़ें?
छोटे ऑफसेट और कुछ पिक्सेल ब्लर के साथ लो-ओपेसिटी डार्क शैडो उपयोग करें — जैसे text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);। यह फोटो या ग्रेडिएंट बैकग्राउंड से सफेद टेक्स्ट को अलग उठाता है।
CSSmatic जैसे अन्य text-shadow टूल्स से यह कैसे अलग है?
CSSmatic में एक टेक्स्ट शैडो सेक्शन है लेकिन केवल एक लेयर हैंडल करता है — नियॉन, 3D या आउटलाइन इफेक्ट के लिए मल्टीपल शैडो स्टैक करना मैन्युअल है। UtiloKit एकमात्र मुफ्त टूल है जो मल्टी-लेयर स्टैकिंग, नामित प्रीसेट, लाइव प्रीव्यू और CSS, Tailwind व React Native में वन-क्लिक एक्सपोर्ट एक साथ देता है।
जेनरेट किया CSS कैसे कॉपी करें, और क्या यह ऑफलाइन काम करता है?
CSS कॉपी करें पर क्लिक करें एक पेस्ट-रेडी डिक्लेरेशन के लिए, Tailwind कॉपी करें आर्बिट्ररी वैल्यू क्लास के लिए, या React Native कॉपी करें textShadowColor / textShadowOffset / textShadowRadius के लिए। लिंक शेयर करें से URL में सेटिंग्स सेव होती हैं। सब मुफ्त, बिना रजिस्ट्रेशन, ब्राउज़र में लोकली चलता है और ऑफलाइन भी काम करता है।
Related tools
सभी टूल्स देखें
नया CSS ग्रेडिएंट जेनरेटर
लाइव प्रीव्यू के साथ linear, radial और conic CSS ग्रेडिएंट बनाएँ।
नया CSS Box-Shadow जेनरेटर
प्रीसेट और लाइव प्रीव्यू के साथ मल्टी-लेयर CSS box-shadow बनाएँ। CSS, value या React style तुरंत कॉपी करें।
नया कलर पैलेट जेनरेटर
complementary, analogous, triadic और monochromatic पैलेट बनाएँ।
नया Cubic Bezier जेनरेटर
कंट्रोल पॉइंट खींचकर CSS easing curve डिज़ाइन करें — लाइव प्रीव्यू के साथ।
नया Border Radius जेनरेटर
CSS गोल कोने और ऑर्गैनिक blob आकार दृश्य रूप से बनाएँ।
नया CSS Flexbox प्लेग्राउंड
लाइव प्रीव्यू के साथ flex properties एडजस्ट करें और CSS कॉपी करें।