Crie gradientes CSS rapidamente com o CSS Gradient Creator
bookmark_borderbookmark
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Essa ferramenta de Josh W Comeau simplifica muito a criação de gradientes atraentes.
Este Gerador de gradiente CSS de Josh W Comeau é um app da Web simples e muito bom que ajuda você a criar "gradientes bonitos e exuberantes".

Pessoalmente, eu tenho dificuldade em mapear a sintaxe para um visual, então essa ferramenta foi uma grande ajuda para mim. Ela se concentra na criação de gradientes lineares e permite configurá-los usando vários modos de cores diferentes (como HCL), mesmo que não sejam diretamente compatíveis com a função CSS linear-gradient
. A postagem do blog de suporte de Josh detalha como a interpolação de cores é calculada e aplicada a algo que o navegador pode renderizar. É uma leitura fascinante sobre a teoria por trás desse funcionamento.
Gradiente linear
Compatibilidade com navegadores
Origem
Imagem principal de Luke Chesser no Unsplash
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2022-05-04 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2022-05-04 UTC."],[],[]]