મફત કન્વર્ટર

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

લાઇવ પૂર્વાવલોકન સાથે સીએસએસ ગ્રેડિયન્ટ્સ દૃષ્ટિની રીતે જનરેટ કરો. કસ્ટમ કલર સ્ટોપ્સ સાથે લીનિયર, રેડિયલ અને કોનિક ગ્રેડિએન્ટ્સ બનાવો — ફ્રી અને ક્લાયંટ-સાઇડ.

લાઈવ પૂર્વાવલોકન
CSS આઉટપુટ
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
કોણ (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

આ ટૂલ વિશે

વિઝ્યુઅલ એડિટર સાથે સુંદર CSS રેખીય અને રેડિયલ ગ્રેડિએન્ટ્સ બનાવો. રંગો પસંદ કરો, સ્ટોપ્સને સમાયોજિત કરો, દિશા અથવા કોણ બદલો અને વાસ્તવિક સમયમાં લાઇવ પૂર્વાવલોકન અપડેટ જુઓ. જનરેટ કરેલ CSS કોડની નકલ કરો — જૂના બ્રાઉઝર માટે વિક્રેતા ઉપસર્ગો સહિત — અને તેને સીધા તમારી સ્ટાઈલશીટમાં પેસ્ટ કરો.

કેવી રીતે વાપરવું

  1. ઢાળ પ્રકાર પસંદ કરો: રેખીય અથવા રેડિયલ.
  2. ગ્રેડિયન્ટ બાર પર ક્લિક કરીને અને રંગો પસંદ કરીને રંગ સ્ટોપ્સ ઉમેરો.
  3. નિયંત્રણોનો ઉપયોગ કરીને ઢાળ કોણ (રેખીય) અથવા સ્થિતિ (રેડિયલ) સમાયોજિત કરો.
  4. આઉટપુટ પેનલમાંથી જનરેટ કરેલ CSS કોડની નકલ કરો.

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

શું CSS ગ્રેડિયન્ટ બધા બ્રાઉઝર્સમાં કામ કરે છે?
આધુનિક CSS ગ્રેડિયન્ટ્સ (રેખીય-ગ્રેડિયન્ટ, રેડિયલ-ગ્રેડિયન્ટ) ક્રોમ, ફાયરફોક્સ, સફારી અને એજ સહિતના તમામ વર્તમાન બ્રાઉઝર્સમાં સપોર્ટેડ છે. ટૂલ વૈકલ્પિક રીતે જૂના બ્રાઉઝર વર્ઝન માટે -વેબકીટ- ઉપસર્ગ જનરેટ કરી શકે છે.
શું હું મલ્ટી-કલર ગ્રેડિએન્ટ્સ બનાવી શકું?
હા. તમને જરૂર હોય તેટલા કલર સ્ટોપ ઉમેરો. રંગો ક્યાં ભળે છે તે નિયંત્રિત કરવા માટે તમે દરેક સ્ટોપની સ્થિતિને પણ સમાયોજિત કરી શકો છો. આ જટિલ મેઘધનુષ્ય, સૂર્યાસ્ત અથવા કસ્ટમ બ્રાન્ડ ગ્રેડિએન્ટ્સ માટે પરવાનગી આપે છે.
રેખીય અને રેડિયલ ગ્રેડિએન્ટ્સ વચ્ચે શું તફાવત છે?
લીનિયર ગ્રેડિએન્ટ્સ એક સીધી રેખા (ઉપરથી નીચે, ડાબેથી જમણે, ત્રાંસા અથવા કોઈપણ ખૂણો) સાથે સંક્રમણ રંગો. રેડિયલ ગ્રેડિએન્ટ્સ ગોળ અથવા લંબગોળ આકારમાં કેન્દ્રબિંદુમાંથી બહારની તરફ રંગોને સંક્રમિત કરે છે.
શું હું ટેક્સ્ટ માટે પૃષ્ઠભૂમિ તરીકે ઢાળનો ઉપયોગ કરી શકું?
હા. પૃષ્ઠભૂમિ-ક્લિપનો ઉપયોગ કરો: -વેબકીટ-ટેક્સ્ટ-ફિલ-કલર સાથે ટેક્સ્ટ: ટેક્સ્ટ પર ગ્રેડિયન્ટ લાગુ કરવા માટે પારદર્શક. જનરેટ કરેલ CSS ગ્રેડિયન્ટ વ્યાખ્યા પૂરી પાડે છે — તેને ગ્રેડિયન્ટ ટેક્સ્ટ માટે આ ગુણધર્મો સાથે જોડો.