ਔਨਲਾਈਨ CSS ਗਰੇਡੀਐਂਟ ਟੂਲ
CSS ਗਰੇਡੀਐਂਟ ਇੱਕ ਖੁਸ਼ਹਾਲ ਛੋਟੀ ਵੈਬਸਾਈਟ ਅਤੇ ਮੁਫਤ ਟੂਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਵੈਬਸਾਈਟਾਂ ਲਈ ਇੱਕ ਗਰੇਡੀਐਂਟ ਬੈਕਗ੍ਰਾਉਂਡ ਬਣਾਉਣ ਦਿੰਦਾ ਹੈ।
CSS ਗਰੇਡੀਐਂਟ ਤੁਹਾਨੂੰ ਦੋ ਜਾਂ ਦੋ ਤੋਂ ਵੱਧ ਨਿਰਧਾਰਤ ਰੰਗਾਂ ਵਿਚਕਾਰ ਨਿਰਵਿਘਨ ਪਰਿਵਰਤਨ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦਿੰਦੇ ਹਨ।
CSS ਦੋ ਕਿਸਮ ਦੇ ਗਰੇਡੀਐਂਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ:
- ਲੀਨੀਅਰ ਗਰੇਡੀਐਂਟ (ਹੇਠਾਂ/ਉੱਪਰ/ਖੱਬੇ/ਸੱਜੇ/ਤਿਰੰਗੇ ਜਾਂਦੇ ਹਨ)
- ਰੇਡੀਅਲ ਗਰੇਡੀਐਂਟ (ਉਨ੍ਹਾਂ ਦੇ ਕੇਂਦਰ ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ)
CSS ਲੀਨੀਅਰ ਗਰੇਡੀਐਂਟ
ਇੱਕ ਲੀਨੀਅਰ ਗਰੇਡੀਐਂਟ ਬਣਾਉਣ ਲਈ ਤੁਹਾਨੂੰ ਘੱਟੋ-ਘੱਟ ਦੋ ਰੰਗਾਂ ਦੇ ਸਟਾਪਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਕਲਰ ਸਟਾਪ ਉਹ ਰੰਗ ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਤੁਸੀਂ ਨਿਰਵਿਘਨ ਪਰਿਵਰਤਨ ਪੇਸ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਤੁਸੀਂ ਗਰੇਡੀਐਂਟ ਪ੍ਰਭਾਵ ਦੇ ਨਾਲ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਅਤੇ ਇੱਕ ਦਿਸ਼ਾ (ਜਾਂ ਇੱਕ ਕੋਣ) ਵੀ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।
ਸੰਟੈਕਸ
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
