สีและการออกแบบ
ตัวสร้างตัวกรอง CSS
Live preview blur, brightness, hue-rotate and more.
.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.
- ตัวสร้าง Gradientสร้าง CSS gradient แบบ linear, radial และ conic
- ตัวสร้าง Box Shadowตัวแก้ไข CSS box-shadow แบบภาพ
- ตัวสร้าง Border Radiusตัวแก้ไข CSS border-radius แยกแต่ละมุม
- ตัวแก้ไข Cubic Bezierออกแบบเส้นโค้ง Easing ของ CSS ด้วยภาพ
- ตัวสร้างแอนิเมชั่น CSSสร้างคีย์เฟรมด้วยสายตา คัดลอก CSS ที่พร้อมใช้
- เครื่องมือสร้าง Glassmorphismการ์ด UI ลายแก้วฝ้าพร้อม backdrop-filter