મફત CSS ગ્રેડિયન્ટ જનરેટર

આ કેવી રીતે કાર્ય કરે છે

Gradient generator સીધા બ્રાઉઝરમાં CSS gradient સ્ટ્રિંગ બનાવે છે — કોઈ લાઇબ્રેરી નહીં, કોઈ સર્વર નહીં, કોઈ અપલોડ નહીં. હાથે લખેલું ફંક્શન તમારા color stops અને angle પરથી રિયલ ટાઇમમાં સાચો linear-gradient, radial-gradient, કે conic-gradient સિન્ટેક્સ એસેમ્બલ કરે છે, પછી તમે પસંદ કરેલા આઉટપુટ ટાર્ગેટ પ્રમાણે પરિણામ ફોર્મેટ કરે છે.

1. 1
   Stops અને દિશા ગોઠવો

   તમે બ્રાઉઝરના નેટિવ color picker વડે 2 થી 6 color stops સેટ કરો છો, પછી દરેક stop ને range slider વડે 0–100% axis પર સ્થાન આપો છો. Linear અને conic gradients માટે તમે angle (0–360°) પણ પસંદ કરો છો; radial gradients માટે તમે shape (ellipse કે circle) અને gradient કેટલું વિસ્તરે તે નિયંત્રિત કરતું size keyword પસંદ કરો છો.
2. 2
   buildCss gradient સ્ટ્રિંગ એસેમ્બલ કરે છે

   દરેક ફેરફાર પર, સ્થાનિક buildCss ફંક્શન તમારા parameters ને સાચા CSS ફંક્શન કૉલમાં જોડે છે — દા.ત. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). કોઈ લાઇબ્રેરી સામેલ નથી; સ્ટ્રિંગ સાદા JavaScript template logic વડે બનેલી છે અને stop array માંથી સીધી જોડાયેલી છે.
3. 3
   Live પ્રિવ્યૂ ઇનલાઇન style દ્વારા રેન્ડર થાય છે

   એસેમ્બલ કરેલ gradient સ્ટ્રિંગ સીધી div એલિમેન્ટ પર ઇનલાઇન background style તરીકે લાગુ થાય છે, તેથી બ્રાઉઝરનું પોતાનું CSS એન્જિન પ્રિવ્યૂ રેન્ડર કરે છે. કોઈ canvas કે image સામેલ નથી — તમે જે જુઓ છો તે શાબ્દિક રીતે લાગુ થઈ રહેલી CSS property છે.
4. 4
   ચાર ફોર્મેટમાં કૉપી-તૈયાર આઉટપુટ

   એક ફોર્મેટ સિલેક્ટર એ જ gradient સ્ટ્રિંગને પ્લેન CSS (background: ...), solid-fallback સાથે CSS-block, Tailwind arbitrary-value ક્લાસ, કે SCSS variable declaration માં રૂપાંતરિત કરે છે. Copy પર ક્લિક કરવાથી navigator.clipboard.writeText દ્વારા પસંદ કરેલ આઉટપુટ ક્લિપબોર્ડમાં લખાય છે. વર્તમાન gradient URL hash માં પણ એન્કોડ થાય છે જેથી તમે તેને બુકમાર્ક કે શેર કરી શકો.

સંબંધિત સાધનો