ابزار طراحی
ساخت گرادیان CSS
CSS Gradient Generator
گرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.
ابزار طراحی
Design Tools
ابزارهای رایگان طراحی گرافیک و UI | Free Design Tools
۲۲ ابزارابزار طراحی
ساخت سایه CSS
CSS Box Shadow Generator
با اسلایدر آفست، بلور، گسترش و رنگ، سایهی دلخواه بسازید و کد CSS آن را کپی کنید.
ابزار طراحی
ساخت افکت شیشهای CSS
CSS Glassmorphism Generator
افکت Glassmorphism (شیشهای مات) با کنترل بلور، شفافیت و حاشیه بسازید.
ابزار طراحی
انتخاب و تبدیل رنگ
Color Picker & Converter
یک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمتهای رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.
ابزار طراحی
ساخت پالت رنگی
Color Palette Generator
از یک رنگ پایه، پالتهای مکمل، مشابه، سهتایی، چهارتایی و تکرنگ بسازید و بهصورت CSS خروجی بگیرید.
ابزار طراحی
بررسی کنتراست رنگ
Contrast Checker
نسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجهی AA/AAA را ببینید.
ابزار طراحی
محاسبه نسبت ابعاد
Aspect Ratio Calculator
با وارد کردن عرض یا ارتفاع و انتخاب نسبت، بُعد دیگر را محاسبه کنید — مناسب تصاویر سوشال مدیا.
ابزار طراحی
ساخت متن گرادیانی
Gradient Text Generator
متن خود را با گرادیان دو رنگ (افقی، عمودی یا قطری) بسازید، کد CSS آن را کپی کنید یا بهصورت عکس PNG دانلود کنید.
ابزار طراحی
شبیهسازی کوررنگی
Color Blindness Simulator
تصویر خود را آپلود کنید و ببینید افراد مبتلا به پروتانوپی، دوترانوپی، تریتانوپی یا آکروماتوپسی آن را چطور میبینند.
ابزار طراحی
پیشنهاد ترکیب فونت
Font Pair Generator
از میان ۲۰ ترکیب فونت گوگل، بهترین ترکیب فونت تیتر و متن را با پیشنمایش زنده انتخاب کنید و کد CSS آن را کپی کنید.
ابزار طراحی
ساخت CSS Clamp
CSS Clamp Generator
با وارد کردن اندازهی حداقل، حداکثر و بازهی viewport، مقدار clamp() برای فونت یا فاصلهگذاری واکنشگرا بسازید.
ابزار طراحی
تبدیل SVG به پسزمینه CSS
SVG to CSS Background
کد SVG را پیست کنید تا پس از بهینهسازی و encode صحیح، بهصورت background-image با data URI آمادهی استفاده در CSS شود.
ابزار طراحی
ساخت انیمیشن CSS
CSS Animation Generator
انیمیشنهای fade، slide، bounce، rotate، pulse، shake، flip و zoom بسازید و کد keyframes آن را کپی کنید.
ابزار طراحی
ساخت فیلتر CSS تصویر
CSS Filter Generator
فیلترهای blur، brightness، contrast، grayscale، hue-rotate، invert، saturate و sepia را با پیشنمایش زنده تنظیم کنید.
ابزار طراحی
ساخت دکمه CSS
Button Generator
دکمهی یکرنگ، خطدار، شبح یا گرادیانی با افکت hover دلخواه بسازید و کد HTML و CSS آن را کپی کنید.
ابزار طراحی
ساخت موج SVG
SVG Wave Generator
موج ملایم، تیز یا لایهای با رنگ و دامنهی دلخواه بسازید و آن را بهصورت SVG یا CSS background دانلود کنید.
ابزار طراحی
ساخت بلاب SVG
Blob Generator
شکلهای ارگانیک و بلابمانند بسازید — با کنترل تصادفی بودن، پیچیدگی و رنگ، و خروجی SVG یا CSS clip-path.
ابزار طراحی
ساخت Clip Path
Clip Path Generator
با کشیدن نقاط روی پیشنمایش زنده یا اسلایدرهای دایره/بیضی/قاب، مقدار CSS clip-path بسازید و کپی کنید.
ابزار طراحی
ساخت Border Radius
Border Radius Generator
هر ۸ گوشهی border-radius را جداگانه (X و Y) تنظیم کنید و با پیشتنظیم دایره، قرصی یا اسکوارکل شروع کنید.
ابزار طراحی
ساخت افکت Neumorphism
Neumorphism Generator
افکت نئومورفیسم (صاف، مقعر، محدب یا فرورفته) با کنترل فاصله، بلور و شدت سایه بسازید و کد CSS آن را کپی کنید.
ابزار طراحی
ساخت مقیاس تایپوگرافی
Typography Scale Generator
از یک سایز پایه و نسبت مقیاس (Golden Ratio، Perfect Fourth و…) پلههای اندازه فونت بسازید و CSS آن را کپی کنید.
ابزار طراحی
پیشتنظیمهای گرادیان CSS
CSS Gradient Presets
بیش از ۵۰ گرادیان آماده در دستههای گرم، سرد، نئون، پاستل و… را انتخاب و سفارشی کنید و کد CSS یا Tailwind بگیرید.