ગ્રેડિયન્ટ જનરેટર એ વેબ ડિઝાઇનર્સ અને ફ્રન્ટ-એન્ડ ડેવલપર્સ માટેનું એક સાધન છે, જે CSS બેકગ્રાઉન્ડ બનાવવા માટે વિવિધ પ્રકારના ગ્રેડિયન્ટ્સ તૈયાર કરવાની સુવિધા આપે છે. આ ટૂલની મદદથી તમે ગ્રેડિયન્ટનો પ્રકાર પસંદ કરી શકો છો, તેની દિશા અથવા આકાર સેટ કરી શકો છો અને મહત્તમ આઠ કલર સ્ટોપ્સ ઉમેરીને તેને કસ્ટમાઇઝ કરી શકો છો. ફેરફારો કરવાની સાથે જ તેનું લાઇવ પ્રીવ્યૂ જોઈ શકાય છે અને માત્ર એક ક્લિકમાં જનરેટ થયેલું CSS કોડ મેળવી શકાય છે.
CSS ગ્રેડિયન્ટના મૂળભૂત પ્રકારો
વેબ ડિઝાઇનમાં વિવિધ વિઝ્યુઅલ ઇફેક્ટ્સ બનાવવા માટે અલગ-અલગ પ્રકારના ગ્રેડિયન્ટ્સનો ઉપયોગ થાય છે. આ ટૂલ મુખ્યત્વે ત્રણ પ્રકારના ગ્રેડિયન્ટ સપોર્ટ કરે છે:
- લીનિયર: આ પ્રકારમાં રંગો એક સીધી રેખામાં એકબીજા સાથે ભળે છે. આ રેખાની દિશા નક્કી કરવા માટે ચોક્કસ ખૂણો (Angle) સેટ કરવામાં આવે છે.
- રેડિયલ: આ પ્રકારમાં રંગો કેન્દ્રબિંદુથી શરૂ થઈને બહારની તરફ ગોળાકાર અથવા લંબગોળ આકારમાં ફેલાય છે.
- કોનિક: આ પ્રકારમાં રંગો કેન્દ્રબિંદુની આસપાસ ઘડિયાળના કાંટાની જેમ અથવા કલર વ્હીલની જેમ ગોળ ફરતા ફેલાય છે.
જ્યારે તમે આ ટૂલ શરૂ કરો છો, ત્યારે પ્રારંભિક ગ્રેડિયન્ટ તરીકે બે કલર સ્ટોપ્સ પહેલેથી સેટ કરેલા હોય છે, જેમાં #6366f1 0% અને #ec4899 100% નો સમાવેશ થાય છે.
લીનિયર ગ્રેડિયન્ટ: દિશા અને ખૂણો
લીનિયર ગ્રેડિયન્ટમાં રંગોના પ્રવાહની દિશા નક્કી કરવા માટે ખૂણો (Angle) મહત્વની ભૂમિકા ભજવે છે. આ ટૂલમાં એંગલ સ્લાઇડરની મદદથી દિશા સેટ કરી શકાય છે.
દિશા નક્કી કરવા માટેના નિયમો નીચે મુજબ છે:
- 0° નો ખૂણો ઉપરની તરફ (up) નિર્દેશ કરે છે.
- 90° નો ખૂણો જમણી તરફ (right) નિર્દેશ કરે છે.
વપરાશકર્તા પોતાની જરૂરિયાત મુજબ આ ખૂણાનું મૂલ્ય બદલીને રંગોના વહેણની દિશાને ચોક્કસ આડી, ઊભી કે ત્રાંસી રેખામાં ગોઠવી શકે છે.
રેડિયલ ગ્રેડિયન્ટ: આકારો અને ફેલાવો
રેડિયલ ગ્રેડિયન્ટમાં રંગો કેન્દ્રમાંથી બહાર તરફ વિસ્તરે છે, તેથી તેમાં કોઈ ખૂણો (Angle) સેટ કરવાનો હોતો નથી. તેના બદલે, વપરાશકર્તાએ ગ્રેડિયન્ટનો આકાર પસંદ કરવાનો રહે છે.
આ ટૂલમાં રેડિયલ ગ્રેડિયન્ટ માટે બે આકારો ઉપલબ્ધ છે:
- વર્તુળ (Circle): રંગો કેન્દ્રમાંથી સમાન અંતરે ગોળાકારમાં બહાર ફેલાય છે.
- લંબગોળ (Ellipse): રંગો લંબગોળ આકારમાં બહારની તરફ વિસ્તરે છે.
આ આકારોની પસંદગી દ્વારા બેકગ્રાઉન્ડની ડિઝાઇનને અનુકૂળ વિઝ્યુઅલ ઇફેક્ટ આપી શકાય છે.
કોનિક ગ્રેડિયન્ટ: કેન્દ્રની આસપાસ રંગોનું પરિભ્રમણ
કોનિક ગ્રેડિયન્ટ રંગોને કેન્દ્રબિંદુની આસપાસ ગોળાકારમાં ફેરવે છે. લીનિયર ગ્રેડિયન્ટની જેમ જ, કોનિક ગ્રેડિયન્ટમાં પણ પરિભ્રમણની શરૂઆત ક્યાંથી કરવી તે નક્કી કરવા માટે ખૂણો (Angle) સેટ કરી શકાય છે. આ પ્રકારનો ઉપયોગ ખાસ કરીને પાઇ ચાર્ટ્સ, કલર વ્હીલ્સ અથવા વિશિષ્ટ બેકગ્રાઉન્ડ પેટર્ન બનાવવા માટે થાય છે.
કલર સ્ટોપ્સની ભૂમિકા અને નિયમો
ગ્રેડિયન્ટની અંદર રંગો કયા સ્થાને કેટલા પ્રમાણમાં દેખાશે તે નક્કી કરવા માટે કલર સ્ટોપ્સનો ઉપયોગ થાય છે.
કલર સ્ટોપ્સ માટેના નિયમો નીચે મુજબ છે:
- મહત્તમ મર્યાદા: તમે ગ્રેડિયન્ટમાં વધુમાં વધુ આઠ કલર સ્ટોપ્સ ઉમેરી શકો છો.
- સ્થાન (Position): દરેક કલર સ્ટોપ ગ્રેડિયન્ટની રેખા પર 0% (શરૂઆત) થી લઈને 100% (અંત) ની વચ્ચે ચોક્કસ સ્થાન પર ગોઠવાય છે.
- નવા સ્ટોપનું ડિફોલ્ટ સ્થાન: જ્યારે તમે નવો કલર સ્ટોપ ઉમેરો છો, ત્યારે તેનું ડિફોલ્ટ સ્થાન આપમેળે 50% સેટ થાય છે.
- બટનની મર્યાદા: જ્યારે ગ્રેડિયન્ટમાં પૂરેપૂરા આઠ કલર સ્ટોપ્સ ઉમેરાઈ જાય છે, ત્યારે "સ્ટોપ ઉમેરો" બટન નિષ્ક્રિય (disabled) થઈ જાય છે.
બે કલર સ્ટોપ્સ વચ્ચેના અંતર અને સ્થાનને બદલીને રંગોનું મિશ્રણ તીવ્ર અથવા એકદમ સોફ્ટ બનાવી શકાય છે.
ટૂલનો ઉપયોગ અને ડેટા પ્રોસેસિંગ
આ ટૂલનો ઉપયોગ કરવો અત્યંત સરળ છે. તમે ગ્રેડિયન્ટ પ્રકાર, એંગલ કે આકાર અને કલર સ્ટોપ્સ સેટ કરો એટલે નીચે આપમેળે CSS કોડ તૈયાર થઈ જાય છે. કોડ મેળવવા માટે "CSS કૉપિ કરો" બટન પર ક્લિક કરવાનું રહે છે. ક્લિક કર્યા પછી, બટનની સ્થિતિ બદલાઈને "Copied" થઈ જાય છે, જે દર્શાવે છે કે કોડ ક્લિપબોર્ડ પર કૉપિ થઈ ગયો છે.
ગોપનીયતાની દ્રષ્ટિએ, દરેક ગ્રેડિયન્ટ સીધો તમારા બ્રાઉઝરમાં જ રેન્ડર થાય છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો (FAQ)
લીનિયર, રેડિયલ અને કોનિક ગ્રેડિયન્ટ વચ્ચે શું તફાવત છે?
લીનિયર ગ્રેડિયન્ટ રંગોને એક સીધી રેખામાં મિશ્રિત કરે છે જેને તમે એંગલ વડે સેટ કરી શકો છો. રેડિયલ ગ્રેડિયન્ટ તેમને કેન્દ્રમાંથી બહારની તરફ વર્તુળ અથવા લંબગોળ આકારમાં ફેલાવે છે. કોનિક ગ્રેડિયન્ટ તેમને કલર વ્હીલની જેમ કેન્દ્રની આસપાસ ફેરવે છે.
કલર સ્ટોપ્સ (color stops) શું છે?
દરેક કલર સ્ટોપ એ ગ્રેડિયન્ટ પર ચોક્કસ સ્થાન સાથે જોડાયેલો રંગ છે — શરૂઆતમાં 0%, અંતમાં 100%. રંગ ક્યાં વધુ ઘાટો દેખાય તે બદલવા માટે સ્ટોપને ખસેડો, અથવા વધુ સારા મિશ્રણ માટે વધુ સ્ટોપ્સ ઉમેરો. તમે મહત્તમ આઠ સ્ટોપ્સનો ઉપયોગ કરી શકો છો.
હું દિશા (direction) કેવી રીતે કંટ્રોલ કરું?
લીનિયર (linear) અથવા કોનિક (conic) ગ્રેડિયન્ટ માટે, એંગલ સ્લાઇડર દિશા સેટ કરે છે — 0° ઉપર તરફ અને 90° જમણી તરફ નિર્દેશ કરે છે. રેડિયલ (radial) ગ્રેડિયન્ટમાં કોઈ એંગલ હોતો નથી; તેના ફેલાવાને બદલવા માટે વર્તુળ (circle) અથવા લંબગોળ (ellipse) આકાર પસંદ કરો.