ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਦੀ ਜਾਣ-ਪਛਾਣ
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਇੱਕ ਮੁਫ਼ਤ ਔਨਲਾਈਨ ਟੂਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਲਈ CSS ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਟੂਲ ਦੀ ਮਦਦ ਨਾਲ ਤੁਸੀਂ ਗ੍ਰੇਡੀਐਂਟ ਦੀ ਕਿਸਮ ਚੁਣ ਸਕਦੇ ਹੋ, ਇਸਦੀ ਦਿਸ਼ਾ ਜਾਂ ਆਕਾਰ ਨੂੰ ਐਡਜਸਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਅੱਠ ਤੱਕ ਕਲਰ ਸਟਾਪਸ ਜੋੜ ਸਕਦੇ ਹੋ। ਜਿਵੇਂ-ਜਿਵੇਂ ਤੁਸੀਂ ਟੂਲ ਵਿੱਚ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਗ੍ਰੇਡੀਐਂਟ ਦਾ ਇੱਕ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਅਤੇ ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਤਿਆਰ ਕੀਤਾ ਗਿਆ CSS ਕੋਡ ਕਾਪੀ ਕਰ ਸਕਦੇ ਹੋ।
ਇਹ ਟੂਲ ਵੱਖ-ਵੱਖ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ:
- ਉਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਜੋ ਇੱਕ CSS ਬੈਕਗ੍ਰਾਊਂਡ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ।
- ਉਹਨਾਂ ਲਈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਗ੍ਰੇਡੀਐਂਟ ਲਈ ਦੋ ਰੰਗਾਂ ਅਤੇ ਇੱਕ ਦਿਸ਼ਾ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- ਡਿਜ਼ਾਈਨਰਾਂ ਜਾਂ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰਾਂ ਲਈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਗ੍ਰੇਡੀਐਂਟ ਦੀ ਕਿਸਮ, ਸਥਿਤੀ, ਅਤੇ ਕਈ ਕਲਰ ਸਟਾਪਸ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਗ੍ਰੇਡੀਐਂਟ ਦੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਨਿਯਮ
ਇਸ ਟੂਲ ਵਿੱਚ ਤੁਸੀਂ ਤਿੰਨ ਮੁੱਖ ਕਿਸਮਾਂ ਦੇ CSS ਗ੍ਰੇਡੀਐਂਟ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ:
- ਲੀਨੀਅਰ: ਇੱਕ ਲੀਨੀਅਰ ਗ੍ਰੇਡੀਐਂਟ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਸਿੱਧੀ ਲਾਈਨ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਕੋਣ (Angle) ਇਸਦੀ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।
- ਰੇਡੀਅਲ: ਇੱਕ ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ ਰੰਗਾਂ ਨੂੰ ਕੇਂਦਰ ਤੋਂ ਬਾਹਰ ਵੱਲ ਇੱਕ ਚੱਕਰ (circle) ਜਾਂ ਅੰਡਾਕਾਰ (ellipse) ਵਿੱਚ ਫੈਲਾਉਂਦਾ ਹੈ।
- ਕੋਨਿਕ: ਇੱਕ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਕਲਰ ਵ੍ਹੀਲ ਵਾਂਗ ਕੇਂਦਰ ਦੇ ਦੁਆਲੇ ਘੁਮਾਉਂਦਾ ਹੈ।
ਇਨਪੁਟਸ ਅਤੇ ਕੰਟਰੋਲ ਵਿਕਲਪ
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਤੁਹਾਨੂੰ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੇ ਇਨਪੁਟਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
- ਗ੍ਰੇਡੀਐਂਟ ਦੀ ਕਿਸਮ: ਤੁਸੀਂ ਲੀਨੀਅਰ, ਰੇਡੀਅਲ, ਜਾਂ ਕੋਨਿਕ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਇੱਕ ਕਿਸਮ ਚੁਣ ਸਕਦੇ ਹੋ।
- ਕੋਣ (Angle): ਲੀਨੀਅਰ ਜਾਂ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟਸ ਲਈ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ (numerical value)। ਇਸ ਲਈ ਦਿੱਤਾ ਗਿਆ ਐਂਗਲ ਸਲਾਈਡਰ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰਦਾ ਹੈ, ਜਿੱਥੇ 0° ਉੱਪਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ ਅਤੇ 90° ਸੱਜੇ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ। ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟਸ ਵਿੱਚ ਕੋਣ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਹੁੰਦੀ।
- ਆਕਾਰ: ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟਸ ਲਈ ਤੁਸੀਂ ਅੰਡਾਕਾਰ ਜਾਂ ਚੱਕਰ ਆਕਾਰ ਚੁਣ ਸਕਦੇ ਹੋ।
- ਕਲਰ ਸਟਾਪਸ: ਤੁਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਅੱਠ ਕਲਰ ਸਟਾਪਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਹਰੇਕ ਕਲਰ ਸਟਾਪ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਵਿਕਲਪ ਹੁੰਦੇ ਹਨ:
- ਸਟਾਪ ਰੰਗ: ਇੱਕ ਰੰਗ ਦਾ ਮੁੱਲ (color value)।
- ਸਥਿਤੀ (Position): 0% ਤੋਂ 100% ਤੱਕ ਦੀ ਇੱਕ ਪ੍ਰਤੀਸ਼ਤਤਾ।
ਕਲਰ ਸਟਾਪਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਨਿਯਮ
ਕਲਰ ਸਟਾਪਸ ਗ੍ਰੇਡੀਐਂਟ ਦੇ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ:
- ਹਰੇਕ ਕਲਰ ਸਟਾਪ ਗ੍ਰੇਡੀਐਂਟ ਦੇ ਨਾਲ ਇੱਕ ਖਾਸ ਸਥਿਤੀ 'ਤੇ ਪਿੰਨ ਕੀਤਾ ਗਿਆ ਰੰਗ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ 0% ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਤੇ 100% ਅੰਤ ਵਿੱਚ ਹੁੰਦਾ ਹੈ।
- ਜਦੋਂ ਤੁਸੀਂ ਟੂਲ ਨੂੰ ਪਹਿਲੀ ਵਾਰ ਖੋਲ੍ਹਦੇ ਹੋ, ਤਾਂ ਸ਼ੁਰੂਆਤੀ ਗ੍ਰੇਡੀਐਂਟ ਵਿੱਚ ਦੋ ਕਲਰ ਸਟਾਪ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ:
#6366f1 0%ਅਤੇ#ec4899 100%। - ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਨਵਾਂ ਕਲਰ ਸਟਾਪ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਉਸਦੀ ਸਥਿਤੀ (Position) 50% ਸੈੱਟ ਹੁੰਦੀ ਹੈ।
- ਤੁਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਅੱਠ ਕਲਰ ਸਟਾਪਸ ਜੋੜ ਸਕਦੇ ਹੋ। ਜਦੋਂ ਅੱਠ ਕਲਰ ਸਟਾਪ ਪੂਰੇ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ "ਸਟਾਪ ਜੋੜੋ" ਬਟਨ ਅਯੋਗ (disabled) ਹੋ ਜਾਂਦਾ ਹੈ।
ਆਉਟਪੁਟ ਅਤੇ ਕਾਪੀ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ
ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਨਤੀਜੇ ਮਿਲਦੇ ਹਨ:
- ਪ੍ਰੀਵਿਊ (Preview): ਜਿਵੇਂ ਹੀ ਤੁਸੀਂ ਕੋਈ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਗ੍ਰੇਡੀਐਂਟ ਦਾ ਇੱਕ ਵਿਜ਼ੂਅਲ ਪ੍ਰੀਵਿਊ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
- CSS: ਟੂਲ ਗ੍ਰੇਡੀਐਂਟ ਲਈ ਲੋੜੀਂਦਾ CSS ਕੋਡ ਤਿਆਰ ਕਰਦਾ ਹੈ।
- ਕੋਡ ਕਾਪੀ ਕਰਨਾ: ਜਦੋਂ ਤੁਸੀਂ "CSS ਕਾਪੀ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਬਟਨ ਦੀ ਸਥਿਤੀ ਬਦਲ ਕੇ "Copied" (ਕਾਪੀ ਕੀਤਾ ਗਿਆ) ਹੋ ਜਾਂਦੀ ਹੈ।
ਪ੍ਰਾਈਵੇਸੀ ਅਤੇ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ
ਤੁਹਾਡੀ ਪ੍ਰਾਈਵੇਸੀ ਸਾਡੇ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਹਰ ਗ੍ਰੇਡੀਐਂਟ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਇਸ ਟੂਲ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
ਲੀਨੀਅਰ, ਰੇਡੀਅਲ ਅਤੇ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟਸ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
ਇੱਕ ਲੀਨੀਅਰ ਗ੍ਰੇਡੀਐਂਟ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਸਿੱਧੀ ਲਾਈਨ ਵਿੱਚ ਮਿਲਾਉਂਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਕੋਣ ਨਾਲ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋ। ਇੱਕ ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ ਉਹਨਾਂ ਨੂੰ ਕੇਂਦਰ ਤੋਂ ਬਾਹਰ ਵੱਲ ਇੱਕ ਚੱਕਰ ਜਾਂ ਅੰਡਾਕਾਰ ਵਿੱਚ ਫੈਲਾਉਂਦਾ ਹੈ। ਇੱਕ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਕਲਰ ਵ੍ਹੀਲ ਵਾਂਗ ਕੇਂਦਰ ਦੇ ਦੁਆਲੇ ਘੁਮਾਉਂਦਾ ਹੈ।
ਕਲਰ ਸਟਾਪਸ (color stops) ਕੀ ਹੁੰਦੇ ਹਨ?
ਹਰੇਕ ਕਲਰ ਸਟਾਪ ਗ੍ਰੇਡੀਐਂਟ ਦੇ ਨਾਲ ਇੱਕ ਸਥਿਤੀ 'ਤੇ ਪਿੰਨ ਕੀਤਾ ਗਿਆ ਰੰਗ ਹੁੰਦਾ ਹੈ — ਸ਼ੁਰੂ ਵਿੱਚ 0%, ਅੰਤ ਵਿੱਚ 100%। ਇਸਦਾ ਰੰਗ ਕਿੱਥੇ ਸਭ ਤੋਂ ਵੱਧ ਦਿਖਾਈ ਦੇਵੇ, ਇਸਨੂੰ ਬਦਲਣ ਲਈ ਇੱਕ ਸਟਾਪ ਨੂੰ ਹਿਲਾਓ, ਜਾਂ ਇੱਕ ਅਮੀਰ ਮਿਸ਼ਰਣ ਲਈ ਹੋਰ ਸਟਾਪ ਜੋੜੋ। ਤੁਸੀਂ ਅੱਠ ਤੱਕ ਕਲਰ ਸਟਾਪਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਮੈਂ ਦਿਸ਼ਾ ਨੂੰ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਾਂ?
ਇੱਕ ਲੀਨੀਅਰ ਜਾਂ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟ ਲਈ, ਐਂਗਲ ਸਲਾਈਡਰ ਦਿਸ਼ਾ ਸੈੱਟ ਕਰਦਾ ਹੈ — 0° ਉੱਪਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ, 90° ਸੱਜੇ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ। ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ ਦਾ ਕੋਈ ਕੋਣ ਨਹੀਂ ਹੁੰਦਾ; ਇਸਦੀ ਬਜਾਏ ਇਹ ਕਿਵੇਂ ਫੈਲਦਾ ਹੈ, ਇਸਨੂੰ ਬਦਲਣ ਲਈ ਇੱਕ ਚੱਕਰ (circle) ਜਾਂ ਅੰਡਾਕਾਰ (ellipse) ਆਕਾਰ ਚੁਣੋ।