DevTulz Online

CSS ગ્રેડિયન્ટ જનરેટર

રંગ સ્ટૉપ

CSS ગ્રેડિયન્ટ શું છે?

CSS ગ્રેડિયન્ટ્સ છબી ફાઇલોનો ઉપયોગ કર્યા વિના બે અથવા વધુ રંગો વચ્ચે સ્મૂધ ટ્રાન્ઝિશન દર્શાવવા દે છે. તે ત્રણ પ્રકારે આવે છે: linear-gradient (સીધી રેખા સાથે), radial-gradient (કેન્દ્ર બિંદુથી ફેલાઈ), અને conic-gradient (કેન્દ્ર બિંદુની ફરતે). ગ્રેડિયન્ટ્સ બેકગ્રાઉન્ડ, બટન, ઓવરલે અને ડેકોરેટિવ એલિમેન્ટ્સ માટે ઉપયોગ થાય છે.

CSS ગ્રેડિયન્ટ જનરેટર કેવી રીતે ઉપયોગ કરવો

  1. સ્વૉચ્સ માંથી પ્રીસેટ પસંદ કરો અથવા તમારો પોતાનો ગ્રેડિયન્ટ સેટ કરો.

  2. ગ્રેડિયન્ટ પ્રકાર પસંદ કરો: linear, radial અથવા conic.

  3. ખૂણો (linear/conic માટે) અથવા આકાર (radial માટે) ગોઠવો.

  4. રંગ સ્ટૉપ સંપાદિત કરો — રંગ અને સ્થિતિ (0–100%) બદલો.

  5. જરૂર મુજબ રંગ સ્ટૉપ ઉમેરો અથવા દૂર કરો.

  6. CSS કૉપિ કરો અને તમારી સ્ટાઇલશીટમાં પેસ્ટ કરો.

વારંવાર પૂછાતા પ્રશ્નો

હું પારદર્શક ગ્રેડિએન્ટ કેવી રીતે બનાવું? સંપૂર્ણ પારદર્શકતા માટે 0 ના આલ્ફા ચેનલ સાથે rgba() અથવા hsla() રંગ મૂલ્યો વાપરો. ઉદાહરણ તરીકે, rgba(0,0,0,0) ના રંગ સ્ટોપ સંપૂર્ણ પારદર્શક કાળો છે, જે છબીઓ પર fade-out ઓવરલે માટે ઉપયોગી છે.

હું કઠોર રંગ સ્ટોપ (કોઈ સંક્રમણ નહીં) કેવી રીતે બનાવું? એક જ સ્થાને બે રંગ સ્ટોપ્સ મૂકો — એક અંત પામે અને એક તે બિંદુએ શરૂ થાય. ઉદાહરણ તરીકે, લાલ 50%, વાદળી 50% મધ્યબિંદુ પર કોઈ ગ્રેડિએન્ટ સંક્રમણ વિના લાલમાંથી વાદળીમાં તાત્ક્ષણિક સ્વિચ બનાવે છે.

કોણીય ગ્રેડિયન્ટને કયા બ્રાઉઝર સપોર્ટ કરે છે? કોણીય ગ્રેડિયન્ટ તમામ આધુનિક બ્રાઉઝર્સમાં સમર્થિત છે (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). તેઓ Internet Explorer માં સમર્થિત નથી.

શું હું એક જ તત્વ પર બહુવિધ ગ્રેડિએન્ટ્સ વાપરી શકું? હા. CSS background લેયર્સની અલ્પવિરામ-વિભાજિત યાદીને સ્વીકારે છે. તમે ગ્રેડિએન્ટ્સ ઠુલાવી શકો છો, તેમને બેકગ્રાઉન્ડ ઇમેજ સાથે જોડી શકો છો અને દરેક લેયરની સ્થિતિ અને કદ સ્વતંત્ર રીતે નિયંત્રણ કરી શકો છો.

Keywords: CSS ગ્રેડિયન્ટ જનરેટર, લિનિયર ગ્રેડિયન્ટ, રેડિયલ ગ્રેડિયન્ટ, કોનિક ગ્રેડિયન્ટ, CSS બેકગ્રાઉન્ડ જનરેટર, ગ્રેડિયન્ટ રંગ પિકર, CSS ગ્રેડિયન્ટ ટૂલ