Generátor filtrů CSS
Vytvářejte a vizualizujte vlastní obrazové filtry CSS
Preview
CSS Code
Ovládací prvky filtru Odstín
Oblíbené filtry
Vintage
Neon Glow
Polaroid
Vintage film
Digitální umění
Jak používat CSS filtry
Co jsou CSS filtry?
Filtry CSS umožňují použít na prvek grafické efekty, jako je rozostření nebo posun barev. Běžně se používají pro obrázky, pozadí a okraje.
Filtry lze použít k vytváření vizuálních efektů, vylepšování obrázků nebo vytváření jedinečných designových prvků bez potřeby externích nástrojů pro úpravu obrázků.
Podporované CSS FVlastnosti
-
blur()ilteru – Použije na prvek Gaussovské rozostření. -
brightness()- Upraví jas prvku. -
contrast()- Upraví kontrast prvku. -
grayscale()- Převede prvek na stupně šedi. -
hue-rotate()- Použije na prvek natočení odstínu. -
invert()- Invertuje barvy prvku. -
opacity()- Upraví krytí prvku. -
saturate()- Prvek nasytí nebo odbarví. -
sepia()- Převede prvek na sépiový.
Jak použít filtry
Pomocí kódu CSS generovaného tímto nástrojem můžete použít filtry na libovolný prvek HTML. Zde je návod:
1. Výběr elementu
Zvolte element HTML, na který chcete filtr aplikovat. Může to být obrázek, pozadí nebo jakýkoli jiný prvek.
2. Přidejte třídu nebo ID
Pokud prvek ještě nemá třídu nebo ID, přidejte je, abyste na něj snáze cílili pomocí CSS.
3. Použití filtru
Použijte CSSfilterpoužití vygenerovaného filtru použijte vlastnost CSS ve své šabloně stylů nebo vloženém stylu.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Spojte více filtrů
Můžete kombinovat více funkcí filtru tak, že je uvedete jeden po druhém, oddělené mezerami.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);Kompatibilita prohlížeče Filtry
CSS jsou široce podporovány v moderních prohlížečích, včetně Chrome, Firefox, Safari, Edge a Opera. Starší prohlížeče, jako je Internet Explorer, je však nepodporují.
Related Tools
Zkrášlovač CSS
Formátujte a zkrášlete svůj CSS kód s profesionální přesností
Převodník jednotek teploty
Transformujte svůj kód SCSS do CSS. Rychle, snadno a bezpečně.
Generujte CSS3 transformace s lehkostí
Výkonný a intuitivní nástroj pro vytváření složitých CSS3 transformací bez psaní kódu. Vizualizujte změny v reálném čase a kopírujte vygenerovaný CSS kód pro použití ve vašich projektech.
Osmičková na desetinná
Snadno převádějte osmičková čísla na desítková
RGB do HSV
Převeďte barvy RGB na hodnoty HSV pro intuitivní manipulaci s barvami
Převodník objemových jednotek
Převod elektrického napětí mezi různými jednotkami s přesností a snadno