Skip to content

الألوان والتصميم

مولد فلاتر CSS

Live preview blur, brightness, hue-rotate and more.

Runs in your browser
Preview
CSS
.filtered {
  filter: none;
}

ملاحظة المحرر

Understanding · Eight functions, one GPU-shader.

هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.

الأسئلة المتكررة

Quick answers.

Which filters can I generate here?

You can adjust `blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, and `sepia` settings.

Are CSS filters performant?

Most filters are hardware-accelerated by the browser. However, large `blur` values or applying many filters to large images can impact scroll performance on lower-end devices.

What browser support should I expect?

Modern browsers have excellent support for CSS filters. For older environments like Internet Explorer, these effects will gracefully degrade and simply not show.

Can I apply multiple filters at once?

Yes. The tool combines all active values into a single `filter` property string, which is the standard way to chain multiple effects in CSS.

يبحث الأشخاص أيضًا عن

أدوات ذات صلة

More in this room.

شاهد الكل في الألوان والتصميم