🎭 CSS Filter Playground

Интерактивная песочница для изучения CSS фильтров

👁️ Live Preview

✨ Готовые эффекты (Presets)

💾 Экспорт

💻 Сгенерированный CSS

filter: none;

💡 О CSS фильтрах

CSS фильтры позволяют применять визуальные эффекты к элементам. Можно комбинировать несколько фильтров для создания уникальных эффектов.

blur() — размытие (в пикселях)
brightness() — яркость (0% = чёрный, 100% = оригинал, >100% = светлее)
contrast() — контрастность (0% = серый, 100% = оригинал, >100% = контрастнее)
grayscale() — оттенки серого (0% = цвет, 100% = ч/б)
hue-rotate() — поворот цветовой гаммы (0-360°)
invert() — инверсия цветов (0% = оригинал, 100% = негатив)
opacity() — прозрачность (0% = прозрачный, 100% = непрозрачный)
saturate() — насыщенность (0% = серый, 100% = оригинал, >100% = насыщеннее)
sepia() — эффект сепии (0% = оригинал, 100% = сепия)
drop-shadow() — тень (как box-shadow, но для прозрачных элементов)

🎛️ Настройки фильтров