🎚️CSS-filtergenerator

Filterfuncties en eenheden

De CSS-filtereigenschap is een eigenschap die effecten op het uiterlijk van afbeeldingen of elementen toepast. Functies zoals blur en sepia worden geschreven gescheiden door spaties.

• px (pixels)：De blur-functie geeft de vervagingsradius in px op. Als u 4px opgeeft, mengen kleuren samen binnen een bereik van 4 pixels.
• % (procent)：De brightness- en sepia-functies stellen de effectsterkte in % in. Bij brightness is 100% de originele helderheid en 120% is 20% lichter.
• deg (graden)：De hue-rotate-functie specificeert de hoek in graden om kleuren op het kleurenwiel te roteren. Bij 180deg verschuift de kleur naar het tegenovergestelde kleurtonaal.

Waarom verandert het resultaat als u de volgorde verandert

Functies in filter worden van links naar rechts toegepast, waarbij elk volgende effect op het resultaat van het vorige effect wordt toegepast. Dit betekent dat het uiterlijk kan veranderen als u de volgorde wijzigt. Als u bijvoorbeeld eerst grijswaarden toepast en vervolgens sepia, blijven bruine tinten behouden, maar als u sepia eerst toepast en vervolgens grijswaarden, verdwijnen de bruine tinten. Dit gereedschap heeft een vaste toepassingsvolgorde, maar u kunt de volgorde wijzigen door de gegenereerde CSS-code te bewerken.

Verschil met backdrop-filter

Filter en backdrop-filter kunnen dezelfde functies gebruiken, maar het doel van het effect is verschillend.

• filter：Filter is een eigenschap die effecten toepast op het uiterlijk van het opgegeven element zelf (zoals afbeeldingen of tekst).
• backdrop-filter：Backdrop-filter is een eigenschap die effecten toepast op de achtergrond die zichtbaar is achter het opgegeven element en wordt gebruikt voor effecten zoals gegroeid glas.