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ě.
Převodník SCSS do CSS
Transformujte svůj kód SCSS do CSS. Rychle, snadno a bezpečně.
Validátor JSON
Snadné kódování parametrů URL přímo ve vašem prohlížeči.
Převod textu do SEO-friendly Slugů
Bez námahy převeďte text do oktální reprezentace
Editor JSON
Snadno upravujte Big JSON - bleskově rychlé a plynulé