ابزارهای CSS

با این ابزارهای رایگان، CSS تمیز و آمادهٔ کپی-چسباندن را به‌صورت بصری بسازید — سایهٔ جعبه، گرادیان، شعاع گوشه (border-radius)، فلکس‌باکس، گرید، انیمیشن، clip-path و فیلترها — با پیش‌نمایش زنده هنگام تنظیم هر مقدار.

سایه‌ها، فیلترها و جزئیات نهایی

سازنده سایه جعبه CSS

سایه جعبه (box-shadow) را به‌صورت بصری با پیش‌نمایش زنده طراحی کنید و کد CSS را کپی کنید.

سازنده سایه متن CSS

یک سایه متن (text-shadow) با پیش‌نمایش زنده طراحی کنید و کد CSS را کپی کنید.

تولیدکننده نئومورفیسم

سایه‌های نئومورفیک با ظاهر نرم همراه با پیش‌نمایش زنده بسازید و کپی کنید.

تولیدکننده Glassmorphism

CSS کارت شیشه‌ی مات را با بلور، شفافیت، اشباع و رنگ تینت بسازید.

تولیدکننده فیلتر CSS

فیلترهای CSS را با اسلایدر و پیش‌نمایش زنده ترکیب کنید، سپس کپی کنید.

خط دور متن CSS

افزودن خط دور یا حاشیه به متن و کپی CSS.

طراح اسکرول‌بار CSS

یک اسکرول‌بار سفارشی طراحی کنید و CSS مربوط به ‎::-webkit-scrollbar‎ را کپی کنید.

شکل‌ها، گرادیان‌ها و پس‌زمینه‌ها

سازنده شعاع گوشه CSS

شعاع هر گوشه را با پیش‌نمایش زنده تنظیم کنید و کد CSS را کپی کنید.

تولیدکننده clip-path در CSS

یک عنصر را به شکل‌های رایج برش بزنید و کد clip-path CSS را کپی کنید.

سازنده مثلث CSS

یک مثلث کاملاً CSS در هر جهتی بسازید و کد CSS را کپی کنید.

سازنده گرادیان CSS

یک گرادیان خطی یا شعاعی با پیش‌نمایش زنده بسازید و کد CSS را کپی کنید.

الگوی پس‌زمینه CSS

یک الگوی پس‌زمینه CSS با دو رنگ بسازید و آن را کپی کنید.

چیدمان و طراحی واکنش‌گرا

زمین بازی Flexbox در CSS

با ویژگی‌های flexbox روی پیش‌نمایش زنده آزمایش کنید و CSS تولیدشده را کپی کنید.

تولیدکننده CSS Grid

یک چیدمان CSS grid با ستون‌ها، ردیف‌ها و فاصله‌ی قابل تنظیم همراه با پیش‌نمایش زنده بسازید.

سازنده Media Query در CSS

یک @media query واکنش‌گرا با تنظیمات آماده بسازید و آن را کپی کنید.

جعبهٔ نسبت ابعاد CSS

تولید یک جعبهٔ نسبت‌ابعاد واکنش‌گرا همراه با جایگزین padding.

چیدمان چندستونی CSS

تولید یک چیدمان متنی چندستونی CSS همراه با خط جداکننده.

حرکت، تبدیل‌ها و انیمیشن

تولیدکننده CSS Transform

translate، rotate، scale و skew را در یک transform واحد CSS با پیش‌نمایش زنده ترکیب کنید.

تولیدکننده انیمیشن CSS

یک انیمیشن keyframe بسازید، آن را به‌صورت زنده پیش‌نمایش کنید و CSS را کپی کنید.

تولیدکننده Easing در CSS

یک easing از نوع cubic-bezier را انتخاب یا بسازید و آن را روی یک نقطه‌ی متحرک پیش‌نمایش دوباره پخش کنید.

تولیدکننده اسپینر CSS

یک اسپینر بارگذاری کاملاً CSS بسازید و CSS را کپی کنید.

هیچ ابزاری با این مطابقت ندارد.

مرور سایر دسته‌بندی‌ها