۱۰۰٪ در مرورگر
ابزارهای CSS
با این ابزارهای رایگان، CSS تمیز و آمادهٔ کپی-چسباندن را بهصورت بصری بسازید — سایهٔ جعبه، گرادیان، شعاع گوشه (border-radius)، فلکسباکس، گرید، انیمیشن، clip-path و فیلترها — با پیشنمایش زنده هنگام تنظیم هر مقدار.
⬛
سازنده سایه جعبه CSS
سایه جعبه (box-shadow) را بهصورت بصری با پیشنمایش زنده طراحی کنید و کد CSS را کپی کنید.
⬭سازنده شعاع گوشه CSS
شعاع هر گوشه را با پیشنمایش زنده تنظیم کنید و کد CSS را کپی کنید.
▤سازنده گرادیان CSS
یک گرادیان خطی یا شعاعی با پیشنمایش زنده بسازید و کد CSS را کپی کنید.
Tسازنده سایه متن CSS
یک سایه متن (text-shadow) با پیشنمایش زنده طراحی کنید و کد CSS را کپی کنید.
▲سازنده مثلث CSS
یک مثلث کاملاً CSS در هر جهتی بسازید و کد CSS را کپی کنید.
⬓زمین بازی Flexbox در CSS
با ویژگیهای flexbox روی پیشنمایش زنده آزمایش کنید و CSS تولیدشده را کپی کنید.
▦تولیدکننده CSS Grid
یک چیدمان CSS grid با ستونها، ردیفها و فاصلهی قابل تنظیم همراه با پیشنمایش زنده بسازید.
⤢تولیدکننده CSS Transform
translate، rotate، scale و skew را در یک transform واحد CSS با پیشنمایش زنده ترکیب کنید.
⌒تولیدکننده Easing در CSS
یک easing از نوع cubic-bezier را انتخاب یا بسازید و آن را روی یک نقطهی متحرک پیشنمایش دوباره پخش کنید.
▢تولیدکننده Glassmorphism
CSS کارت شیشهی مات را با بلور، شفافیت، اشباع و رنگ تینت بسازید.
◇تولیدکننده clip-path در CSS
یک عنصر را به شکلهای رایج برش بزنید و کد clip-path CSS را کپی کنید.
☼تولیدکننده فیلتر CSS
فیلترهای CSS را با اسلایدر و پیشنمایش زنده ترکیب کنید، سپس کپی کنید.
⤿تولیدکننده انیمیشن CSS
یک انیمیشن keyframe بسازید، آن را بهصورت زنده پیشنمایش کنید و CSS را کپی کنید.
◜تولیدکننده اسپینر CSS
یک اسپینر بارگذاری کاملاً CSS بسازید و CSS را کپی کنید.
▩الگوی پسزمینه CSS
یک الگوی پسزمینه CSS با دو رنگ بسازید و آن را کپی کنید.
◳تولیدکننده نئومورفیسم
سایههای نئومورفیک با ظاهر نرم همراه با پیشنمایش زنده بسازید و کپی کنید.
@سازنده Media Query در CSS
یک @media query واکنشگرا با تنظیمات آماده بسازید و آن را کپی کنید.
▌طراح اسکرولبار CSS
یک اسکرولبار سفارشی طراحی کنید و CSS مربوط به ::-webkit-scrollbar را کپی کنید.
▭جعبهٔ نسبت ابعاد CSS
تولید یک جعبهٔ نسبتابعاد واکنشگرا همراه با جایگزین padding.
‖چیدمان چندستونی CSS
تولید یک چیدمان متنی چندستونی CSS همراه با خط جداکننده.
T○خط دور متن CSS
افزودن خط دور یا حاشیه به متن و کپی CSS.