ਮੁਫ਼ਤ CSS ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

gradient ਜਨਰੇਟਰ ਸਿੱਧੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ CSS gradient strings ਬਣਾਉਂਦਾ ਹੈ — ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ, ਸਰਵਰ ਜਾਂ ਅੱਪਲੋਡ ਨਹੀਂ। ਇੱਕ ਹੱਥ ਨਾਲ ਲਿਖਿਆ function ਤੁਹਾਡੇ color stops ਅਤੇ ਕੋਣ ਤੋਂ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਸਹੀ linear-gradient, radial-gradient, ਜਾਂ conic-gradient ਸਿੰਟੈਕਸ ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਨਤੀਜੇ ਨੂੰ ਤੁਹਾਡੇ ਚੁਣੇ ਆਉਟਪੁੱਟ ਨਿਸ਼ਾਨੇ ਲਈ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ।

1. 1
   Stops ਅਤੇ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰੋ

   ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ color picker ਨਾਲ 2 ਤੋਂ 6 color stops ਸੈੱਟ ਕਰਦੇ ਹੋ, ਫਿਰ range ਸਲਾਈਡਰ ਨਾਲ ਹਰ stop ਨੂੰ 0–100% ਧੁਰੇ 'ਤੇ ਰੱਖਦੇ ਹੋ। linear ਅਤੇ conic gradients ਲਈ ਤੁਸੀਂ ਕੋਣ (0–360°) ਵੀ ਚੁਣਦੇ ਹੋ; radial gradients ਲਈ ਤੁਸੀਂ ਆਕਾਰ (ellipse ਜਾਂ circle) ਅਤੇ size keyword ਚੁਣਦੇ ਹੋ ਜੋ ਤੈਅ ਕਰਦਾ ਹੈ ਕਿ gradient ਕਿੰਨੀ ਦੂਰ ਫੈਲੇ।
2. 2
   buildCss gradient string ਬਣਾਉਂਦਾ ਹੈ

   ਹਰ ਬਦਲਾਅ 'ਤੇ, ਇੱਕ ਲੋਕਲ buildCss function ਤੁਹਾਡੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਹੀ CSS function call ਵਿੱਚ ਜੋੜਦਾ ਹੈ — ਜਿਵੇਂ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)। ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ਾਮਲ ਨਹੀਂ; string ਸਾਦੇ JavaScript template ਤਰਕ ਨਾਲ ਬਣਦੀ ਹੈ ਅਤੇ stop array ਤੋਂ ਸਿੱਧੀ ਜੋੜੀ ਜਾਂਦੀ ਹੈ।
3. 3
   ਲਾਈਵ ਝਲਕ inline style ਰਾਹੀਂ ਦਿਸਦੀ ਹੈ

   ਬਣੀ gradient string ਸਿੱਧੇ ਇੱਕ div element 'ਤੇ inline background style ਵਜੋਂ ਲਾਈ ਜਾਂਦੀ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਪਣਾ CSS ਇੰਜਣ ਝਲਕ ਬਣਾਉਂਦਾ ਹੈ। ਕੋਈ canvas ਜਾਂ ਚਿੱਤਰ ਸ਼ਾਮਲ ਨਹੀਂ — ਜੋ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ ਉਹ ਸ਼ਾਬਦਿਕ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੋ ਰਹੀ CSS property ਹੈ।
4. 4
   ਚਾਰ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਕਾਪੀ ਲਈ ਤਿਆਰ ਆਉਟਪੁੱਟ

   ਇੱਕ ਫਾਰਮੈਟ ਚੋਣਕਾਰ ਉਸੇ gradient string ਨੂੰ ਸਾਦੀ CSS (background: ...), ਠੋਸ fallback ਵਾਲੇ CSS block, Tailwind arbitrary-value class, ਜਾਂ SCSS variable declaration ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਕਾਪੀ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਚੁਣਿਆ ਆਉਟਪੁੱਟ navigator.clipboard.writeText ਰਾਹੀਂ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। ਮੌਜੂਦਾ gradient URL hash ਵਿੱਚ ਵੀ ਐਨਕੋਡ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਬੁੱਕਮਾਰਕ ਜਾਂ ਸਾਂਝਾ ਕਰ ਸਕੋ।

ਸੰਬੰਧਿਤ ਟੂਲ