ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ
ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ CSS ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਓ।
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਬਾਰੇ
GuruAlpha ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਲਾਈਵ ਪੂਰਵ-ਦਰਸ਼ਨ ਦੇ ਨਾਲ ਲੀਨੀਅਰ, ਰੇਡੀਅਲ ਅਤੇ ਕੋਨਿਕ CSS ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਂਦਾ ਹੈ। ਰੰਗ ਚੁਣੋ, ਕੋਣ ਅਤੇ ਦਿਸ਼ਾਵਾਂ ਵਿਵਸਥਿਤ ਕਰੋ, ਕਈ ਕਲਰ ਸਟਾਪਾਂ ਦੀਆਂ ਪਰਤਾਂ ਬਣਾਓ, ਅਤੇ ਵਰਤੋਂ ਲਈ ਤਿਆਰ CSS ਕੋਡ ਕਾਪੀ ਕਰੋ। ਪਿਛੋਕੜ, ਬਟਨ, ਹੀਰੋ ਸੈਕਸ਼ਨ ਅਤੇ ਕਿਸੇ ਵੀ ਡਿਜ਼ਾਈਨ ਤੱਤ ਲਈ ਬਿਹਤਰੀਨ ਜੋ ਸੁਚਾਰੂ ਰੰਗ ਤਬਦੀਲੀ ਤੋਂ ਲਾਭ ਲੈਂਦਾ ਹੈ।
ਗ੍ਰੇਡੀਐਂਟ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਸਭ ਤੋਂ ਮਸ਼ਹੂਰ ਡਿਜ਼ਾਈਨ ਰੁਝਾਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ। ਇਹ ਫਲੈਟ ਡਿਜ਼ਾਈਨਾਂ ਵਿੱਚ ਤਸਵੀਰਾਂ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਡੂੰਘਾਈ, ਦ੍ਰਿਸ਼ਟੀ ਦਿਲਚਸਪੀ ਅਤੇ ਸੂਖਮਤਾ ਜੋੜਦੇ ਹਨ। ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਕਸਟਮ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾ ਦਿੰਦਾ ਹੈ — ਆਪਣੇ ਰੰਗ ਚੁਣੋ, ਕੋਣ ਵਿਵਸਥਿਤ ਕਰੋ, ਅਤੇ ਨਤੀਜਾ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਵੇਖੋ। ਬਣਾਇਆ CSS ਕੋਡ ਸਿੱਧਾ ਤੁਹਾਡੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਟੂਲ ਤਿੰਨ ਗ੍ਰੇਡੀਐਂਟ ਕਿਸਮਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਲੀਨੀਅਰ ਗ੍ਰੇਡੀਐਂਟ ਰੰਗਾਂ ਨੂੰ ਇੱਕ ਸਿੱਧੀ ਰੇਖਾ ਦੇ ਨਾਲ ਤਬਦੀਲ ਕਰਦੇ ਹਨ — ਸਭ ਤੋਂ ਆਮ ਕਿਸਮ, ਜੋ ਪਿਛੋਕੜ, ਬਟਨ ਅਤੇ ਓਵਰਲੇ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ ਇੱਕ ਕੇਂਦਰੀ ਬਿੰਦੂ ਤੋਂ ਫੈਲਦੇ ਹਨ — ਸਪਾਟਲਾਈਟ ਪ੍ਰਭਾਵਾਂ ਅਤੇ ਗੋਲਾਕਾਰ ਡਿਜ਼ਾਈਨਾਂ ਲਈ ਬਿਹਤਰੀਨ। ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟ ਇੱਕ ਕੇਂਦਰੀ ਬਿੰਦੂ ਦੇ ਦੁਆਲੇ ਘੁੰਮਦੇ ਹਨ — ਕਲਰ ਵੀਲ ਅਤੇ ਪਾਈ ਚਾਰਟ ਪ੍ਰਭਾਵਾਂ ਲਈ ਲਾਭਦਾਇਕ।
ਮਲਟੀ-ਸਟਾਪ ਐਡੀਟਰ ਤੁਹਾਨੂੰ ਗ੍ਰੇਡੀਐਂਟ ਲਾਈਨ ਦੇ ਨਾਲ ਕਲਰ ਸਟਾਪ ਜੋੜਨ, ਹਟਾਉਣ ਅਤੇ ਦੁਬਾਰਾ ਪੋਜ਼ੀਸ਼ਨ ਦੇਣ ਦਿੰਦਾ ਹੈ। ਹਰ ਸਟਾਪ ਨੂੰ ਇੱਕ ਖਾਸ ਰੰਗ ਅਤੇ ਪੋਜ਼ੀਸ਼ਨ (0-100%) ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਤਬਦੀਲੀ 'ਤੇ ਸਟੀਕ ਕੰਟਰੋਲ ਦਿੰਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਟਾਪ ਵਿਵਸਥਿਤ ਕਰਦੇ ਹੋ ਤਾਂ ਰੀਅਲ-ਟਾਈਮ ਪੂਰਵ-ਦਰਸ਼ਨ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਤੁਰੰਤ ਦ੍ਰਿਸ਼ਟੀ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਐਕਸਪੋਰਟ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਸਾਦਾ CSS (linear-gradient), ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸਾਂ ਦੇ ਨਾਲ CSS, Sass/SCSS ਵੇਰੀਏਬਲ, CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਅਤੇ Tailwind ਆਰਬਿਟ੍ਰੇਰੀ ਕੀਮਤਾਂ ਸ਼ਾਮਲ ਹਨ। ਇਹ ਸਾਰੇ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ।
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
- ਲੀਨੀਅਰ, ਰੇਡੀਅਲ ਅਤੇ ਕੋਨਿਕ ਗ੍ਰੇਡੀਐਂਟ ਕਿਸਮਾਂ
- ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਦੇ ਨਾਲ ਮਲਟੀ-ਸਟਾਪ ਕਲਰ ਐਡੀਟਰ
- ਰੀਅਲ-ਟਾਈਮ ਲਾਈਵ ਪੂਰਵ-ਦਰਸ਼ਨ
- ਕੋਣ ਅਤੇ ਦਿਸ਼ਾ ਕੰਟਰੋਲ
- CSS, SCSS, CSS ਵੇਰੀਏਬਲ, Tailwind ਵਜੋਂ ਐਕਸਪੋਰਟ
- ਪ੍ਰੇਰਣਾ ਲਈ ਰੈਂਡਮ ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ
- ਕਾਪੀ ਲਈ ਤਿਆਰ CSS ਕੋਡ
- ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ
- GuruAlpha 'ਤੇ ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਖੋਲ੍ਹੋ।
- ਗ੍ਰੇਡੀਐਂਟ ਕਿਸਮ ਚੁਣੋ: ਲੀਨੀਅਰ, ਰੇਡੀਅਲ ਜਾਂ ਕੋਨਿਕ।
- ਕਲਰ ਸਟਾਪ ਜੋੜਨ ਲਈ ਗ੍ਰੇਡੀਐਂਟ ਬਾਰ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
- ਕਲਰ ਪਿਕਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਹਰ ਸਟਾਪ ਲਈ ਰੰਗ ਚੁਣੋ।
- ਕੋਣ (ਲੀਨੀਅਰ) ਜਾਂ ਸ਼ਕਲ (ਰੇਡੀਅਲ/ਕੋਨਿਕ) ਵਿਵਸਥਿਤ ਕਰੋ।
- ਡੈਮੋ ਤੱਤ 'ਤੇ ਗ੍ਰੇਡੀਐਂਟ ਦਾ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਪੂਰਵ-ਦਰਸ਼ਨ ਵੇਖੋ।
- ਬਣਾਇਆ CSS ਕੋਡ ਕਾਪੀ ਕਰੋ।
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਵਰਤਣ ਦੇ ਸੁਝਾਅ
- ਸਾਦੇ, ਸ਼ਾਨਦਾਰ ਗ੍ਰੇਡੀਐਂਟਾਂ ਲਈ 2-3 ਕਲਰ ਸਟਾਪਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ।
- ਪ੍ਰੇਰਣਾ ਲਈ ਰੈਂਡਮ ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਵਰਤੋ।
- 135 ਡਿਗਰੀ 'ਤੇ ਲੀਨੀਅਰ ਗ੍ਰੇਡੀਐਂਟ ਇੱਕ ਮਸ਼ਹੂਰ ਤਿਰਛਾ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦੇ ਹਨ।
- ਚਮਕਦਾਰ ਕੇਂਦਰ ਵਾਲੇ ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟ ਸਪਾਟਲਾਈਟ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦੇ ਹਨ।
- ਹਮੇਸ਼ਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗ੍ਰੇਡੀਐਂਟ ਅਜ਼ਮਾਓ — ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ।
ਗ੍ਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
ਲੀਨੀਅਰ, ਰੇਡੀਅਲ ਅਤੇ ਕੋਨਿਕ ਵਿੱਚ ਕੀ ਫਰਕ ਹੈ?
ਲੀਨੀਅਰ ਇੱਕ ਰੇਖਾ (ਦਿਸ਼ਾ) ਦੇ ਨਾਲ ਤਬਦੀਲ ਹੁੰਦਾ ਹੈ। ਰੇਡੀਅਲ ਇੱਕ ਕੇਂਦਰੀ ਬਿੰਦੂ (ਗੋਲਾ/ਅੰਡਾਕਾਰ) ਤੋਂ ਫੈਲਦਾ ਹੈ। ਕੋਨਿਕ ਇੱਕ ਕੇਂਦਰ ਦੇ ਦੁਆਲੇ ਘੁੰਮਦਾ ਹੈ (ਕਲਰ ਵੀਲ ਵਾਂਗ)।
ਮੈਂ ਹੋਰ ਕਲਰ ਸਟਾਪ ਕਿਵੇਂ ਜੋੜਾਂ?
ਨਵਾਂ ਸਟਾਪ ਜੋੜਨ ਲਈ ਗ੍ਰੇਡੀਐਂਟ ਬਾਰ 'ਤੇ ਕਿਤੇ ਵੀ ਕਲਿੱਕ ਕਰੋ। ਦੁਬਾਰਾ ਪੋਜ਼ੀਸ਼ਨ ਦੇਣ ਲਈ ਸਟਾਪ ਖਿੱਚੋ। ਇਸ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਕਿਸੇ ਸਟਾਪ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
ਕੀ CSS ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ-ਅਨੁਕੂਲ ਹੈ?
ਐਕਸਪੋਰਟ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨਾਲ ਵੱਧ ਤੋਂ ਵੱਧ ਅਨੁਕੂਲਤਾ ਲਈ ਵੈਂਡਰ ਪ੍ਰੀਫਿਕਸ (-webkit-, -moz-) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ।
ਕੀ ਮੈਂ ਗ੍ਰੇਡੀਐਂਟ ਨੂੰ ਟੈਕਸਟ ਰੰਗ ਵਜੋਂ ਵਰਤ ਸਕਦਾ ਹਾਂ?
ਹਾਂ। ਟੈਕਸਟ 'ਤੇ ਗ੍ਰੇਡੀਐਂਟ ਪਿਛੋਕੜ ਲਾਗੂ ਕਰਨ ਲਈ background-clip: text ਅਤੇ -webkit-text-fill-color: transparent ਵਰਤੋ।