filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);O gerador de filtros CSS é um editor visual da propriedade Filtro CSS. Você move um controle deslizante para cada função de filtro – desfocar, brilho, contraste, saturar, escala de cinza, sépia, inverter, girar matiz e opacidade – e observar o efeito se aplicar a uma visualização em tempo real e copiar o CSS exato que ele produz.
A propriedade Filter aplica efeitos gráficos como desfoque, mudança de cor e ajuste de contraste diretamente no navegador, sem a necessidade de editor de imagens. Múltiplas funções podem ser encadeadas em uma única declaração e aplicadas em ordem, que é a construção do estilo fotográfico, como vintage, quente e dramático. Essa ferramenta gerencia essa cadeia para você e gera apenas as funções que você realmente mudou, mantendo o CSS limpo.
Tudo acontece no seu navegador. Comece a partir de uma predefinição como vintage ou em tons de cinza, ajuste cada função e copie a declaração. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.
Escolha uma predefinição como vintage, quente, frio, dramático ou escala de cinza para uma visão instantânea ou comece pelo padrão (sem filtros aplicados).
Arraste os controles deslizantes, brilho, contraste, saturação, escala de cinza, sépia, inverter, rotação de matiz e opacidade. A visualização é atualizada instantaneamente para que você possa discar a aparência exata.
Coloque várias funções juntas — por exemplo, Sepia Plus Contrast Plus Sature para uma aparência de filme quente. A ferramenta os encadeia na ordem correta automaticamente.
Copie a declaração de filtro gerada, que inclui apenas as funções que você alterou e cole-a em qualquer elemento ou imagem em sua folha de estilo.
Desfocar, brilho, contraste, saturar, escala de cinza, sépia, inverter, girar matiz e opacidade - todas as funções de filtro CSS comuns com um controle deslizante dedicado
Somente as funções que você realmente altera são gravadas na declaração, para que você nunca envie valores de identidade redundantes, como brilho (100%)
Uma visualização é atualizada instantaneamente à medida que você arrasta, para que você possa ver o efeito combinado de cada filtro antes de copiar uma única linha de CSS
Receitas com curadoria de vintage, quente, legal, dramático, desbotado, escala de cinza, invertido e desfoque fornecem um ponto de partida comprovado em vez de uma tela em branco
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!