استفاده از CSS برای ایجاد فیلترهای روی عکسها بسیار ساده است. با استفاده از ویژگی filter در CSS3 می‌توانید افکت‌های مختلفی را روی عکس‌ها اعمال کنید. در ادامه چند مثال از فیلترهای متداول را برای عکس‌ها نشان می‌دهم:

اگر هنوز دوره طراحی سایت با HTML , CSS کامل و پیشرفته ندیدی بهتره از لینک زیر شروع کنی :

آموزش طراحی رابط کاربری و پروژه محور با HTML 5 , CSS 3

اسکالا کردن رنگ (Grayscale):

این فیلتر باعث تبدیل تصویر به سیاه و سفید می‌شود.

img {
  filter: grayscale(100%);
}

تاری (Blur):

این فیلتر باعث تار کردن تصویر می‌شود.

img {
  filter: blur(5px);
}

سطوح رنگی (Saturate):

این فیلتر باعث افزایش یا کاهش اشباع رنگ‌ها می‌شود. مقدار 100% نشان‌دهنده اشباع نرمال است.

img {
  filter: saturate(200%);
}

کنتراست (Contrast):

این فیلتر باعث افزایش یا کاهش کنتراست تصویر می‌شود. مقدار 100% نشان‌دهنده کنتراست نرمال است.

img {
  filter: contrast(150%);
}

سایه‌زنی (Drop Shadow):

این فیلتر باعث ایجاد سایه‌زنی پیرامون تصویر می‌شود.

img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

شما می‌توانید هر کدام از این فیلترها را با ترکیب یا تغییر مقادیر بیشتر به تصویر اعمال کنید. برای تغییر فیلترها به تصویر موردنظر خود، مقادیر مختلفی را به ویژگی filter اضافه کنید.