Design

Gradiente

Uma transição suave e contínua entre duas ou mais cores ao longo de um espaço definido.

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

Experimente

Gerador de paletas

Gere paletas de cores harmoniosas usando esquemas complementares, análogos, triádicos e complementares divididos.

Gerador de tons

Gere escalas de tons estilo Tailwind CSS (50–950) a partir de qualquer cor base para sistemas de design.

Artigos relacionados

CSS color-mix(): Misture Cores Nativamente no Navegador

Aprenda CSS color-mix() para misturar cores nativamente no navegador. Domine a sintaxe, espaços de cores, casos de uso práticos e crie paletas dinâmicas sem JavaScript.

Criando um Seletor de Cores como Web Component do Zero

Crie um seletor de cores acessível como Web Component. Implemente renderização em canvas, sliders de matiz, canais alfa e eventos customizados com Shadow DOM.

Espaços de Cor Perceptuais: Lab, LCH, Oklab, OKLCH

Explore espaços de cor perceptualmente uniformes — CIE Lab, LCH, Oklab e OKLCH. Aprenda como cada um foi projetado, onde se destaca e qual usar para CSS e trabalho de design.

Gerando Imagens OG Coloridas com Next.js e Satori

Gere imagens Open Graph dinâmicas com Next.js e Satori. Crie templates OG com consciência de cor, gradientes, cores de marca e designs responsivos.

Separação de Cores Explicada: Preparando Arquivos para Impressão

Entenda a separação de cores CMYK, placas de cores especiais, trapping e marcas de registro. Prepare arquivos prontos para impressão com separações de cores corretas.

Cores da Marca Chainlink: Azul Oráculo e o Hexágono

Explore o azul distinto da Chainlink (#375BD2) e o simbolismo do logotipo hexagonal. Saiba como o branding de redes de oráculos constrói confiança empresarial na infraestrutura DeFi.