Gerador de Gradientes CSS

O Que É um Gradiente CSS?

Um gerador de gradientes CSS é uma ferramenta visual que ajuda a construir transições suaves de cor sem precisar escrever a sintaxe de gradiente manualmente. Em CSS, um gradiente é uma transição suave entre duas ou mais cores, renderizada diretamente pelo navegador sem nenhum arquivo de imagem. A especificação CSS Image Module Level 4 define funções de gradiente como um tipo de valor de imagem, o que significa que podem aparecer em qualquer lugar onde um valor de background-image, list-style-image ou border-image é aceito. Como o navegador rasteriza os gradientes em tempo de renderização, eles se adaptam a qualquer resolução e nunca produzem artefatos borrados em telas de alta densidade. Usar um gerador de gradientes CSS economiza tempo e elimina tentativas e erros — você ajusta cores e posições visualmente e copia a regra CSS pronta.

O CSS suporta três formas principais de gradiente: linear (ao longo de uma linha reta), radial (a partir de um ponto central) e cônico (uma varredura ao redor de um ponto central). Cada forma aceita uma lista de paradas de cor, onde você especifica a cor e, opcionalmente, uma posição (porcentagem ou comprimento). O navegador interpola as cores entre as paradas usando o espaço de cor sRGB por padrão, embora o CSS Color Level 4 permita especificar outros espaços de cor como oklch e lab para transições perceptualmente mais suaves.

Os gradientes substituem fundos baseados em imagens para a maioria dos fins decorativos na web. Uma única regra CSS produz o que antes exigia uma exportação do Photoshop e uma requisição HTTP. Eles são independentes de resolução, não requerem largura de banda além do próprio CSS e podem ser animados ou usados em transições com propriedades CSS padrão. A sintaxe de gradiente é estável em todos os principais navegadores desde 2013, e a forma sem prefixo funciona no Chrome, Firefox, Safari e Edge sem necessidade de alternativas.

Por Que Usar Este Gerador de Gradientes CSS?

Escrever a sintaxe de gradiente manualmente significa adivinhar posições de paradas, verificar valores de ângulo e atualizar a página repetidamente para ver o resultado. Um construtor visual permite ver o gradiente enquanto você o cria, ajustar as paradas arrastando e copiar o CSS final quando estiver do jeito certo.

Casos de Uso do Gerador de Gradientes CSS

Referência de Tipos de Gradiente CSS

O CSS define cinco funções de gradiente. Os três tipos principais (linear, radial, cônico) têm uma variante repetida que repete o padrão em mosaico. repeating-linear-gradient() e repeating-radial-gradient() são úteis para fundos listrados e anéis concêntricos. Todas as funções de gradiente aceitam paradas de cor em qualquer formato CSS: HEX, RGB, HSL, cores nomeadas ou oklch. O suporte nos navegadores para as cinco funções é praticamente universal no Chrome, Firefox, Safari e Edge — nenhum prefixo de fornecedor é necessário.

Gradientes Linear vs Radial vs Cônico

Cada tipo de gradiente mapeia cores para geometrias de forma diferente. Escolher o tipo certo depende do efeito visual desejado, não de uma diferença de qualidade entre eles. Para a maioria dos fundos de página e divisores de seção, um gradiente linear é o padrão correto — é o mais simples de entender e o mais previsível em elementos de tamanhos variados. Gradientes radiais e cônicos são mais adequados para efeitos visuais específicos onde a geometria circular ou rotacional é significativa, e não meramente decorativa.

Exemplos de Código

Exemplos de geração e aplicação de gradientes CSS de forma programática em JavaScript, Python, CSS e Go. Cada um produz strings de gradiente CSS válidas que você pode usar diretamente em folhas de estilos ou estilos inline.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Perguntas Frequentes