التصميم والموارد
CSS Filter مولد
إنشاء CSS filter values مع a visual effect preview.
الإدخال
CSS Filter مولد
css filterblurcontrastgenerator
الإخراج
Generated CSS filter
Filter
blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg)
.filter-preview {
width: min(100%, 340px);
border-radius: 24px;
overflow: hidden;
filter: blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg);
box-shadow: 0 18px 36px rgba(15,23,42,0.14);
}
.filter-preview .hero {
min-height: 160px;
background: radial-gradient(circle at 20% 20%, #38bdf8, transparent 30%), radial-gradient(circle at 80% 30%, #8b5cf6, transparent 35%), linear-gradient(145deg, #111827, #0f172a);
}
.filter-preview .copy {
padding: 16px 18px;
background: white;
color: #0f172a;
}Filter preview
Live canvas
أدوات مشابهة
Box Shadow مولد
إنشاء CSS box-shadow values مع custom offsets و blur.
Flexbox مولد
إنشاء flex contذكاء اصطناعيner CSS مع a live layout preview.
Border Radius مولد
إنشاء border-radius CSS من corner values.
CSS Grid مولد
إنشاء CSS Grid layouts مع columns, gap, و row sizing.
CSS Button مولد
إنشاء styled CSS button code.
CSS Transلـm مولد
Build CSS transلـm strings من common transلـm values.