html - How do I combined CSS text-shadow and "background-image: -webkit-gradient" -

मैं सीआरएल पाठ-छाया का उपयोग करके क्रोम / सफारी में ढाल + पाठ छाया प्रभाव हासिल करने की कोशिश कर रहा हूं और पाठ- छाया और पृष्ठभूमि-छवि: -विबकिट-ग्रेडिएंट, उदाहरण के लिए ब्लेड देखें मैं केवल एक प्रभाव लागू कर सकता हूँ (यदि मैं छाया जोड़ता हूं तो ढाल गायब हो जाता है। मैं क्या कर रहा हूं?

  h1 {font-size: 100px; background-image: -webkit- ढाल (रैखिक, बायां ऊपर, बाएं नीचे, से (सफ़ेद), से (काला)) ;- वेबकीट-पृष्ठभूमि-क्लिप: पाठ; -webkit-text-fill-color: पारदर्शी; पाठ-छाया: 0 1px 1px #fff ;}  

ढाल "गायब हो" क्योंकि text-shadow

पृष्ठभूमि

पृष्ठभूमि

पृष्ठभूमि

पृष्ठभूमि के ऊपर एक स्तर पर है।

हम इस पाठ को प्रतिलिपि बनाकर काम कर सकते हैं और इसे मूल परत के नीचे रख सकते हैं, फिर वहां छाया लागू करें:

  h1 {position: relative; font-size : 100px; पाठ-संरेखित: केंद्र;} h1 div {background-image: -webkit-gradient (रैखिक, बायां शीर्ष, बाएं नीचे, से (सफेद), से (काला)); -webkit-background-clip: text; -वेबकिट-पाठ-भरण-रंग: टी ransparent; स्थिति: पूर्ण; चौड़ाई: 100%; } H1: के बाद {पाठ-छाया: 10px 10px 11px #fff; रंग: पारदर्शी; } #hello: {सामग्री के बाद: 'हैलो वर्ल्ड'; }  

  & lt; h1 id = "हैलो" & gt; & lt; div & gt; हैलो वर्ल्ड & lt; / div & gt; & lt; / h1 & gt;