CSS ਗਰੇਡੀਐਂਟ ਜਨਰੇਟਰ
ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਅਤੇ ਕਾਪੀ-ਰੈਡੀ CSS ਦੇ ਨਾਲ ਰੇਖਿਕ, ਰੇਡੀਅਲ, ਅਤੇ ਕੋਨਿਕ ਗਰੇਡੀਐਂਟ ਬਣਾਓ। ਸਟਾਪਾਂ, ਕੋਣਾਂ ਅਤੇ ਆਕਾਰਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ — ਫਿਰ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ।
CSS Gradient Generator
LiveCSS output
background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);
Key capabilities
- ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਅਤੇ ਕਾਪੀ-ਰੈਡੀ CSS ਦੇ ਨਾਲ ਰੇਖਿਕ, ਰੇਡੀਅਲ, ਅਤੇ ਕੋਨਿਕ ਗਰੇਡੀਐਂਟ ਬਣਾਓ।
- ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ
- ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ
ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ
- ਗਰੇਡੀਐਂਟ ਕਿਸਮ ਅਤੇ ਕੋਣ ਜਾਂ ਸਥਿਤੀ ਚੁਣੋ।
- ਰੰਗ ਸਟਾਪਾਂ ਨੂੰ ਜੋੜੋ ਜਾਂ ਸੰਪਾਦਿਤ ਕਰੋ।
- ਤਿਆਰ CSS ਦੀ ਨਕਲ ਕਰੋ।
How this tool works
- ਗਰੇਡੀਐਂਟ ਕਿਸਮ ਅਤੇ ਕੋਣ ਜਾਂ ਸਥਿਤੀ ਚੁਣੋ।
- ਰੰਗ ਸਟਾਪਾਂ ਨੂੰ ਜੋੜੋ ਜਾਂ ਸੰਪਾਦਿਤ ਕਰੋ।
- ਤਿਆਰ CSS ਦੀ ਨਕਲ ਕਰੋ।
Recommended settings
- ਪਹਿਲਾਂ ਡਿਫੌਲਟ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਲੋੜ ਪੈਣ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰੋ
Supported formats
Text / on-page input
File size and limits
- ਪੁਰਾਣੇ ਫ਼ੋਨਾਂ 'ਤੇ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਮਲਟੀ-ਲੇਅਰ ਪ੍ਰੀਵਿਊਜ਼ ਹੌਲੀ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ।
Privacy
ਰੰਗ ਅਤੇ CSS ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ। ਪੂਰਵਦਰਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ ਕਦੇ ਵੀ ਤੁਹਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਅੱਪਲੋਡ ਨਹੀਂ ਕਰਦੇ ਹਨ।
Common use cases
- ਜਦੋਂ ਵੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ CSS ਗਰੇਡੀਐਂਟ ਜਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋ: ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਅਤੇ ਕਾਪੀ-ਰੈਡੀ CSS ਨਾਲ ਲੀਨੀਅਰ, ਰੇਡੀਅਲ, ਅਤੇ ਕੋਨਿਕ ਗਰੇਡੀਐਂਟ ਬਣਾਓ।
Troubleshooting
ਪੇਸਟ ਕਰਨ ਤੋਂ ਬਾਅਦ ਪੂਰਵਦਰਸ਼ਨ ਵੱਖਰਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਪ੍ਰਤੀਯੋਗੀ CSS ਦੀ ਜਾਂਚ ਕਰੋ (ਰੀਸੈੱਟ, ਵਿਰਾਸਤੀ ਰੰਗ)। ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਨਿਯਮ ਨੂੰ ਇੱਕ ਅਲੱਗ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ
ਕੀ ਇਹ ਮੇਰਾ CSS ਅੱਪਲੋਡ ਕਰਦਾ ਹੈ?
ਨਹੀਂ। ਜਨਰੇਟਰ ਅਤੇ ਕਨਵਰਟਰ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਚੱਲਦੇ ਹਨ।
ਕੀ ਮੈਨੂੰ ਇੱਕ ਖਾਤੇ ਦੀ ਲੋੜ ਹੈ?
ਨਹੀਂ। ਟੂਲ ਖੋਲ੍ਹੋ, ਨਿਯੰਤਰਣ ਬਦਲੋ, ਅਤੇ CSS ਦੀ ਨਕਲ ਕਰੋ।
ਸੰਬੰਧਿਤ ਟੂਲ
Box Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolHEX ↔ RGB ↔ HSL Converter
Convert colors between HEX, RGB, and HSL instantly with a live swatch.
Open tool