ToolAtlasO hero precisa de um degradê sem abrir o Figma no meio da daily. Esta aba devolve a linha de CSS. Não pinta um PNG e não calibra a cor da gráfica.
O hero da landing precisa ir do azul-noite ao índigo e o Figma está no outro notebook. O trabalho desta página é o CSS do degradê nesta aba, para colar no stylesheet — não um arquivo de imagem.
A ferramenta junta tipo (linear ou radial), ângulo ou centro e as paradas. Não é mesh do Figma, não é filtro em cima de uma foto e não gera PNG. UtiloKit e afins no Brasil vendem o mesmo job com Tailwind e conic; aqui o recorte é o snippet clássico, sem upload.
Quando o snippet resolve
- Fundo de hero, botão ou faixa em site estático, sem abrir editor pesado.
- Alinhar o degradê com o HEX da marca depois de amostrar a foto no conta-gotas.
- Iterar ângulo e paradas no navegador antes do deploy.
É a ferramenta errada se você precisa de um bitmap para e-mail, de sombra de card ou de um fundo dentro de um PDF.
Exemplo para colar:
background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);Depois de copiar
- Duas ou três paradas e um ângulo (135deg cobre a maior parte dos botões) bastam. Mesh do Figma você quebra em paradas ou exporta PNG.
- Texto em cima: teste o ponto mais lavado no contraste. WCAG aqui é orientação, não laudo.
- Unidade de espaçamento do layout (
rem,em): unidades CSS. Logo vetorial: SVG para PNG.
Nada é enviado. repeating-linear-gradient e clientes de e-mail velhos quebram com frequência — nesses casos um PNG estreito ganha do CSS.