چطور یک box-shadow در CSS بسازم و کدش را کپی کنم؟

اسلایدرهای مربوط به جابجایی افقی و عمودی، محوشدگی، گسترش، رنگ و شفافیت را تنظیم کنید و پیشنمایش زنده را ببینید. سپس دکمه کپی را در بخش خروجی CSS بزنید. همچنین میتوانید از پیشتنظیمها مثل ملایم، درخشش یا Material 8 شروع کنید.

آیا میتوانم چند سایه را روی یک عنصر قرار دهم؟

بله. دکمه + افزودن لایه سایه دیگر را بزنید تا لایههای بیشتری اضافه کنید، سپس میتوانید ترتیب آنها را تغییر دهید، هر کدام را پنهان کردن یا حذف کنید. لایهها با ویرگول در یک مقدار box-shadow واحد ترکیب میشوند.

چطور یک سایه داخلی بسازم؟

یک لایه را انتخاب کنید و گزینه سایه درونی را فعال کنید، یا پیشتنظیم درونی را بارگذاری کنید. خروجی برای آن لایه شامل کلمه کلیدی inset خواهد بود.

آیا میتوانم به جای CSS ساده، یک کلاس Tailwind دریافت کنم؟

بله. علاوه بر دستور CSS، ابزار یک کلاس مقدار دلخواه Tailwind به شکل shadow-[...] تولید میکند که در آن فاصلهها با زیرخط جایگزین شده و آماده استفاده در کد شماست.

آیا راه سادهتری از اسلایدرها برای تنظیم موقعیت سایه وجود دارد؟

بله. جعبه پیشنمایش را بکشید تا سایه لایه فعال جابجا شود و برای کنترل دقیقتر، Shift را نگه دارید. همچنین میتوانید پیشنمایش پسزمینه و رنگ جعبه را تغییر دهید تا ببینید سایه روی طرح شما چطور به نظر میرسد.

آیا واقعاً رایگان است؟

بله. همه ابزارها رایگان هستند، بدون حساب کاربری و بدون کارت اعتباری. پردازش بهجای سرورهای ما روی دستگاه شما انجام میشود و همین است که رایگان ماندن آن را ممکن میکند.

آیا در موبایل کار میکند؟

بله. روی مرورگرهای امروزی موبایل در iOS و اندروید اجرا میشود و نیازی به نصب چیزی نیست.

🎨

تولید سایه CSS رایگان

سازنده بصری برای box-shadow در CSS با پیش‌نمایش زنده، لایه‌بندی چندگانه، انتخابگر رنگ، تبدیل inset و کپی با یک کلیک. شامل پیش‌تنظیم‌های Material، neumorphism و درخشش.

در مرورگر شما اجرا می‌شودبدون ثبت‌نام، بدون پاپ‌آپورود لازم نیسترایگان برای همیشه

پس از بارگذاری آفلاین کار می‌کند

پیش‌نمایش پس‌زمینه

جعبه را بکشید تا سایه لایه فعال را موضع‌دهی کنید - برای کنترل دقیق Shift را نگه دارید

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

پیش‌تنظیم‌ها

رنگ جعبه

شعاع حاشیه (16px)

x (0px)

y (4px)

محو (12px)

گسترش (0px)

رنگ

شفافیت (15%)

سایه درونی

کاربردهای رایج

سایه های UI کارتسایه های کارت ظریف برای داشبورد، شبکه های محصول و داشبورد بسازید.
افکت فشار دکمهسایه های دکمه را بسازید که عمق دنیای واقعی و حالت های فشار را تقلید کنند.
Neumorphism Soft UIبا سایه های روشن + تاریک جفت شده، به نظر Neumorphism Soft UI بسازید.
Modal و Popover Shadowsاحساس بلندتر و شناور برای کادرهای محاوره و منوهای کشویی ایجاد کنید.
اثرات درخشش و حلقه فوکوساثرات تأکید درخشنده، حلقه های فوکوس و هایلایت های سبک نئون را ایجاد کنید.

نحوه کار

سازنده box-shadow یک ابزار React کاملاً سمت کاربر است — بدون سرور، بدون کتابخانه. لیستی از اشیاء لایه سایه را در state نگه می‌دارد، رشته‌های معتبر CSS box-shadow را در هر تغییر با یک قالب‌بند rgba() دست‌نویس می‌سازد، و آن‌ها را مستقیماً از طریق prop استایل React روی یک عنصر پیش‌نمایش اعمال می‌کند تا موتور رندر خود مرورگر نتیجه را فوراً ترسیم کند.

1
پارامترهای لایه قالب‌بند را تغذیه می‌کنند
هر لایه سایه جابه‌جایی‌های x/y، بلور، پخش، یک رنگ هگزادسیمال، و مقدار شفافیت را ذخیره می‌کند. در هر تغییر، یک تابع shadowToCss کوچک رنگ هگز را با یک عبارت باقاعده به اجزای RGB تبدیل می‌کند، سپس رشته rgba() را می‌سازد — مثلاً، 0px 4px 12px 0px rgba(0, 0, 0, 0.15). چند لایه با کاما به هم متصل می‌شوند.
2
مرورگر پیش‌نمایش زنده را رندر می‌کند
رشته ساخته‌شده مستقیماً در JSX به ویژگی استایل boxShadow یک عنصر div اختصاص داده می‌شود. React ویژگی DOM را به‌روز می‌کند، و موتور CSS مرورگر بلافاصله سایه را رنگ می‌کند — بوم (canvas) یا WebGL دخیل نیست، فقط رندر بومی CSS.
3
کشیدن برای موقعیت‌دهی از API رویدادهای اشاره‌گر استفاده می‌کند
کلیک و کشیدن جعبه پیش‌نمایش، setPointerCapture را روی عنصر فراخوانی می‌کند، سپس دلتاهای onPointerMove را ردیابی می‌کند تا جابه‌جایی‌های x و y لایه فعال را در زمان واقعی به‌روز کند. نگه‌داشتن Shift ضریب مقیاس ۰٫۲۵× را برای موقعیت‌دهی دقیق اعمال می‌کند.
4
خروجی به کلیپ‌بورد کپی می‌شود
ابزار دو فرمت خروجی از همان داده لایه تولید می‌کند: یک اعلان استاندارد CSS box-shadow، و یک کلاس مقدار-دلخواه Tailwind (shadow-[...]) که در آن فاصله‌ها با زیرخط طبق قواعد سینتکس Tailwind جایگزین می‌شوند. کپی با یک کلیک از navigator.clipboard.writeText استفاده می‌کند.