ਬਾਕਸ ਸ਼ੈਡੋ ਜੇਨਰੇਟਰ

ਆਫਸੈੱਟ, ਬਲਰ, ਫੈਲਾਅ ਅਤੇ ਰੰਗ ਨਾਲ ਲੇਅਰਡ ਬਾਕਸ-ਸ਼ੈਡੋ ਡਿਜ਼ਾਈਨ ਕਰੋ। ਇੱਕ ਕਾਰਡ 'ਤੇ ਪੂਰਵਦਰਸ਼ਨ ਕਰੋ, ਫਿਰ ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • ਆਫਸੈੱਟ, ਬਲਰ, ਫੈਲਾਅ ਅਤੇ ਰੰਗ ਦੇ ਨਾਲ ਲੇਅਰਡ ਬਾਕਸ-ਸ਼ੈਡੋ ਡਿਜ਼ਾਈਨ ਕਰੋ — ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਸ਼ਾਮਲ ਹੈ।
  • ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ
  • ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

  1. ਔਫਸੈੱਟ, ਧੁੰਦਲਾ, ਅਤੇ ਫੈਲਾਓ ਵਿਵਸਥਿਤ ਕਰੋ।
  2. ਰੰਗ ਅਤੇ ਧੁੰਦਲਾਪਨ ਚੁਣੋ (ਜਾਂ ਲੇਅਰਾਂ ਜੋੜੋ)।
  3. ਬਾਕਸ-ਸ਼ੈਡੋ CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

How this tool works

  1. ਔਫਸੈੱਟ, ਧੁੰਦਲਾ, ਅਤੇ ਫੈਲਾਓ ਵਿਵਸਥਿਤ ਕਰੋ।
  2. ਰੰਗ ਅਤੇ ਧੁੰਦਲਾਪਨ ਚੁਣੋ (ਜਾਂ ਲੇਅਰਾਂ ਜੋੜੋ)।
  3. ਬਾਕਸ-ਸ਼ੈਡੋ CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

Recommended settings

  • ਪਹਿਲਾਂ ਡਿਫੌਲਟ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਲੋੜ ਪੈਣ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰੋ

Supported formats

Text / on-page input

File size and limits

  • ਪੁਰਾਣੇ ਫ਼ੋਨਾਂ 'ਤੇ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਮਲਟੀ-ਲੇਅਰ ਪ੍ਰੀਵਿਊਜ਼ ਹੌਲੀ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ।

Privacy

ਰੰਗ ਅਤੇ CSS ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ। ਪੂਰਵਦਰਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ ਕਦੇ ਵੀ ਤੁਹਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਅੱਪਲੋਡ ਨਹੀਂ ਕਰਦੇ ਹਨ।

Common use cases

  • ਜਦੋਂ ਵੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ ਬਾਕਸ ਸ਼ੈਡੋ ਜੇਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋ: ਆਫਸੈੱਟ, ਬਲਰ, ਫੈਲਾਅ ਅਤੇ ਰੰਗ ਦੇ ਨਾਲ ਲੇਅਰਡ ਬਾਕਸ-ਸ਼ੈਡੋ ਡਿਜ਼ਾਈਨ ਕਰੋ — ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਸ਼ਾਮਲ ਹੈ।

Troubleshooting

ਪੇਸਟ ਕਰਨ ਤੋਂ ਬਾਅਦ ਪੂਰਵਦਰਸ਼ਨ ਵੱਖਰਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਪ੍ਰਤੀਯੋਗੀ CSS ਦੀ ਜਾਂਚ ਕਰੋ (ਰੀਸੈੱਟ, ਵਿਰਾਸਤੀ ਰੰਗ)। ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਨਿਯਮ ਨੂੰ ਇੱਕ ਅਲੱਗ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਕੀ ਇਹ ਮੇਰਾ CSS ਅੱਪਲੋਡ ਕਰਦਾ ਹੈ?

ਨਹੀਂ। ਜਨਰੇਟਰ ਅਤੇ ਕਨਵਰਟਰ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਚੱਲਦੇ ਹਨ।

ਕੀ ਮੈਨੂੰ ਇੱਕ ਖਾਤੇ ਦੀ ਲੋੜ ਹੈ?

ਨਹੀਂ। ਟੂਲ ਖੋਲ੍ਹੋ, ਨਿਯੰਤਰਣ ਬਦਲੋ, ਅਤੇ CSS ਦੀ ਨਕਲ ਕਰੋ।

ਸੰਬੰਧਿਤ ਟੂਲ