Meta tags:
description=Gradientes CSS exibem transições progressivas entre duas ou mais cores. Saiba sobre os tipos de gradientes, uso e veja exemplos.;

Headings (most frequently used words):

gradiente, de, exemplo, linear, com, radial, para, cônico, gradientes, do, repetido, cores, da, esquerda, direita, múltiplas, centro, radiais, sintaxe, posicionando, cor, ângulo, cima, baixo, pontos, forma, especificado, posicionado, css, lineares, cônicos, suporte, navegadores, dicas, tópicos, relacionados, prática, diagonais, usando, ângulos, transparência, três, dimensionamento, básico, alterando, diagonal, sólida, transparente, espaçamento, diferente, tamanho, rotacionado,

Text of the page (most frequently used words):
background (67), html (64), gradient (64), title (54), style (53), gradiente (46), div (46), color (44), image (39), para (38), body (38), head (38), css (35), #gradientes (35), border (35), uma (31), você (30), width (28), height (27), class (24), cores (23), cor (23), blue (23), radial (23), linear (23), copiar (22), text (22), exemplo (20), font (20), com (19), experimente (19), mesmo (19), doctype (19), the (18), document (18), grid (18), aprender (15), right (15), 250 (14), column (13), left (12), bottom (12), são (10), que (10), mais (10), elemento (10), padrão (10), 150 (10), position (10), linha (10), break (10), cônico (9), chave (9), ponto (9), top (9), animation (9), radiais (8), por (8), palavra (8), stroke (8), lineares (7), size (7), vez (7), pode (7), deg (7), repeating (7), ângulo (7), centro (7), farthest (7), corner (7), side (7), fff700 (7), ff0509 (7), 0052b0 (7), 300 (7), direita (7), overflow (7), decoration (7), offset (7), flex (7), page (6), tamanho (6), como (6), conic (6), repetido (6), forma (6), pontos (6), 200 (6), closest (6), cada (6), last (6), esquerda (6), direção (6), cima (6), align (6), padding (6), margin (6), type (6), variant (6), w3docs (5), todos (5), prática (5), navegadores (5), transform (5), repete (5), central (5), partir (5), pelo (5), qualquer (5), múltiplas (5), baixo (5), direction (5), list (5), transition (5), line (5), outline (5), radius (5), child (5), formatter (5), sobre (4), generator (4), exemplos (4), cônicos (4), transições (4), entre (4), hsl (4), use (4), combine (4), yellow (4), red (4), sintaxe (4), posição (4), gradient2 (4), gradient1 (4), 103601 (4), termina (4), canto (4), borda (4), circle (4), duas (4), b340b3 (4), imagem (4), mode (4), fill (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), suporte (3), dicas (3), nomes (3), tipos (3), página (3), propriedade (3), mas (3), muito (3), lista (3), então (3), topo (3), green (3), from (3), círculo (3), 0deg (3), assim (3), move (3), usando (3), posicionando (3), comprimento (3), sentido (3), horário (3), isso (3), fora (3), último (3), onde (3), ellipse (3), elipse (3), 05ff33 (3), três (3), shape (3), start (3), rgba (3), sólida (3), totalmente (3), ff0856 (3), 520f41 (3), 66f507 (3), f7df00 (3), f56e00 (3), f50707 (3), aponta (3), transição (3), longo (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), auto (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), tópicos (2), relacionados (2), this (2), guia (2), flexbox (2), quais (2), mencionados (2), animar (2), propriedades (2), fundos (2), controle (2), repetição (2), mosaico (2), frequentemente (2), suaves (2), opacity (2), matizes (2), hexadecimal (2), aceita (2), transparentes (2), foto (2), criar (2), sobreposições (2), antigos (2), fallback (2), redor (2), ff0000 (2), varredura (2), posicionado (2), nos (2), porcentagens (2), comprimentos (2), absolutos (2), color1 (2), color2 (2), torno (2), muda (2), conforme (2), torna (2), define (2), gradient4 (2), gradient3 (2), especificado (2), distante (2), próxima (2), meio (2), fixar (2), porcentagem (2), absoluto (2), opcional (2), primeira (2), última (2), esticá (2), útil (2), 253 (2), 117 (2), 235 (2), transparente (2), ser (2), alfa (2), esta (2), legível (2), cria (2), dessa (2), elas (2), fluem (2), ângulos (2), giram (2), 90deg (2), diagonal (2), vertical (2), não (2), fazem (2), funciona (2), função (2), reta (2), sem (2), também (2), uso (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, repetidos, elípticos, circulares, outras, junto, valores, coloca, dentro, dos, camada, habilitar, qual, aplicados, leves, animá, los, repinta, inteiro, prefira, próprio, movimentos, desempenho, interpolação, diferentes, passar, cinzas, opacos, escolher, próximos, usar, mantém, limpas, separada, vírgulas, sobrepor, vários, primeiro, listado, fica, empilhe, algumas, práticas, suportados, modernos, recentes, funcionam, todas, versões, atuais, chrome, edge, firefox, safari, precisar, dar, sólido, mostrado, anteriormente, 225, orange, angular, clássica, efeitos, explosão, estelar, tabuleiro, xadrez, ff0095, be05fc, 03ff0f, fcf000, ffa600, rotacionado, rotaciona, toda, deslocando, partida, alterando, 1eff00, fff200, básico, posicionados, começa, varre, gira, suas, ponteiros, relógio, varrendo, espectro, enquanto, ferramenta, natural, gráficos, pizza, rodas, acentos, angulares, 005cfa, f7da00, f70000, anéis, versão, anel, este, próximo, decide, colocado, seja, até, expande, antes, terminar, existem, quatro, palavras, medidas, dimensionamento, parâmetro, estica, corresponder, proporção, permanece, perfeitamente, redondo, independentemente, largura, altura, mover, espaçamento, diferente, controlar, quanto, raio, ela, ocupa, parte, quando, omitida, obtém, centralizada, irradia, necessários, menos, dois, ter, 036ffc, 6c008a, d5b6de, definido, pela, aqui, listras, texturas, barras, progresso, podem, parcial, desvanecer, fundo, relação, está, trás, canal, defina, opaco, aplicar, sobreposição, transparência, combinar, específica, início, fim, atribuir, posições, faixa, 100, número, espaçadas, uniformemente, fundindo, suavemente, total, medido, negativos, anti, 180deg, horizontal, fazer, percorrer, diagonais, adicione, rotacionar, modo, fique, declaração, entendem, ignoram, recorrem, garantindo, texto, permaneça, dica, omitir, completamente, tudo, após, separadas, vírgula, válida, incluindo, nomeadas, rgb, cujas, controla, coisas, dela, vai, base, possui, variante, irradiam, aborda, funções, definidas, executáveis, independentes, resolução, escalam, perda, qualidade, geram, nenhuma, requisição, http, adicional, alternativa, leve, arquivos, botões, formas, decorativas, gerada, navegador, exibe, suave, progressiva, especificadas, tecnicamente, lugar, espera, valor, mask, exibem, progressivas, saiba, veja, zoom, index, writing, will, change, widows, white, space, user, select, bidi, property, underline, orientation, indent, ink, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guides, tabelas, links, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
gressiva entre duas ou mais cores especificadas como um gradiente é tecnicamente uma image você o define em qualquer lugar onde css espera um valor de imagem mais frequentemente na propriedade background image mas também funciona para border image list style image e mask image gradientes são independentes de resolução escalam para qualquer tamanho sem perda de qualidade e não geram nenhuma requisição http adicional o que os torna uma alternativa leve a arquivos de imagem para fundos botões sobreposições e formas decorativas esta página aborda as três funções de gradiente definidas pelo css com exemplos executáveis para cada uma gradientes lineares as cores fluem ao longo de uma linha reta gradientes radiais as cores irradiam a partir de um ponto central gradientes cônicos as cores giram em torno de um ponto central cada função também possui uma variante repeating que repete o gradiente em mosaico em vez de esticá lo uma vez pelo elemento gradientes lineares a função linear gradient cria uma imagem cujas cores fazem a transição ao longo de uma linha reta você controla duas coisas a direção dessa linha e a lista de pontos de cor ao longo dela sem direção a linha vai do topo para a base do elemento sintaxe do gradiente linear background image linear gradient direction color1 color2 copiar direction é opcional pode ser uma palavra chave to right to bottom left ou um ângulo 90deg tudo após isso é a lista de cores separadas por vírgula qualquer cor css válida funciona incluindo cores nomeadas hexadecimal rgb e hsl de cima para baixo gradientes lineares fazem a transição de cima para baixo por padrão então você pode omitir a direção completamente exemplo de gradiente linear de cima para baixo doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient 0052b0 b340b3 style head body div class gradient div body html copiar experimente você mesmo dica a declaração background color é um fallback navegadores muito antigos que não entendem o gradiente ignoram a linha background image e recorrem à cor sólida garantindo que o texto permaneça legível da esquerda para a direita adicione a palavra chave to right para rotacionar a linha de modo que a primeira cor fique na borda esquerda e a última na direita exemplo de gradiente linear da esquerda para a direita doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient to right 0052b0 b340b3 style head body div class gradient div body html copiar experimente você mesmo gradientes diagonais combine uma palavra chave vertical e uma horizontal por exemplo to bottom right para fazer a linha percorrer o elemento na diagonal de canto a canto exemplo de gradiente diagonal doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient to bottom right 0052b0 b340b3 style head body div class gradient div body html copiar experimente você mesmo usando ângulos para controle total sobre a direção use um ângulo em vez de uma palavra chave o ângulo é medido no sentido horário a partir da direção para cima 0deg aponta a linha do gradiente para cima as cores fluem de baixo para cima 90deg aponta para a direita da esquerda para a direita 180deg aponta para baixo ângulos negativos giram no sentido anti horário exemplo de gradiente linear com ângulo especificado doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient 70 deg 0052b0 b340b3 style head body div class gradient div body html copiar experimente você mesmo múltiplas cores um gradiente aceita qualquer número de cores por padrão elas são espaçadas uniformemente com cada cor se fundindo suavemente na próxima exemplo de gradiente linear com múltiplas cores doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient f50707 f56e00 f7df00 66f507 0052b0 520f41 ff0856 style head body div class gradient div body html copiar experimente você mesmo você pode combinar uma direção com múltiplas cores e fixar cada cor em uma posição específica uma posição é uma porcentagem 0 é o início da linha 100 é o fim ou um comprimento absoluto atribuir duas posições a uma cor cria uma faixa sólida dessa cor entre elas exemplo de gradiente linear com múltiplas cores da esquerda para a direita doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient to right f50707 f56e00 f7df00 66f507 0052b0 520f41 ff0856 style head body div class gradient div body html copiar experimente você mesmo exemplo de gradiente linear com múltiplas cores da direita para a esquerda doctype html html head title title of the document title style gradient height 300 px background color blue background image linear gradient to left f50707 f56e00 f7df00 66f507 0052b0 520f41 ff0856 style head body div class gradient div body html copiar experimente você mesmo transparência os pontos de cor podem ser parcial ou totalmente transparentes o que é útil para desvanecer um fundo em relação ao que está por trás use rgba ou qualquer cor com canal alfa e defina o alfa de 0 totalmente transparente a 1 totalmente opaco esta é a forma padrão de aplicar uma sobreposição legível sobre uma foto exemplo de gradiente linear de cor sólida para transparente doctype html html head title title of the document title style gradient height 200 px background image linear gradient to left rgba 235 117 253 0 rgba 235 117 253 1 style head body div class gradient div body html copiar experimente você mesmo gradiente linear repetido repeating linear gradient repete o padrão do gradiente pelo elemento em vez de esticá lo uma vez o tamanho de uma repetição é definido pela posição do último ponto de cor aqui 10 então o padrão de três cores se repete a cada 10 da linha isso é útil para listras e texturas de barras de progresso exemplo de gradiente linear repetido doctype html html head title title of the document title style gradient height 200 px background color blue background image repeating linear gradient 55 deg d5b6de 6c008a 7 036ffc 10 style head body div class gradient div body html copiar experimente você mesmo gradientes radiais um gradiente radial irradia a partir de um ponto central com a primeira cor no meio e a última na borda são necessários pelo menos dois pontos de cor o gradiente pode ter a forma de um circle círculo ou de uma ellipse elipse o padrão sintaxe do gradiente radial background image radial gradient shape size at position start color last color copiar a parte shape size at position é opcional quando omitida você obtém uma elipse farthest corner centralizada no elemento exemplo de gradiente radial com três cores doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background image radial gradient ff0509 fff700 05ff33 style head body div class gradient div body html copiar experimente você mesmo posicionando pontos de cor radiais assim como nos gradientes lineares você pode fixar cada cor em uma porcentagem ou comprimento absoluto para controlar quanto do raio ela ocupa exemplo de pontos de cor com espaçamento diferente doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background image radial gradient ff0509 10 fff700 20 05ff33 80 style head body div class gradient div body html copiar experimente você mesmo posicionando o centro use a palavra chave at para mover o centro do gradiente para fora do meio do elemento usando porcentagens ou comprimentos absolutos exemplo de gradiente radial com centro posicionado doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background image radial gradient at 0 30 ff0509 10 px fff700 30 05ff33 50 style head body div class gradient div body html copiar experimente você mesmo forma do gradiente radial o parâmetro de forma é circle ou ellipse uma elipse o padrão se estica para corresponder à proporção do elemento um círculo permanece perfeitamente redondo independentemente da largura e altura do elemento exemplo de forma do gradiente radial doctype html html head title title of the document title style gradient1 height 150 px width 200 px background color blue background image radial gradient red yellow green gradient2 height 150 px width 200 px background color blue background image radial gradient circle red yellow green style head body h2 ellipse h2 div class gradient1 div h2 circle h2 div class gradient2 div body html copiar experimente você mesmo dimensionamento do gradiente radial a palavra chave de tamanho decide onde o último ponto de cor é colocado ou seja até onde o gradiente se expande antes de terminar existem quatro palavras chave medidas a partir do centro do gradiente closest side termina na borda mais próxima do elemento closest corner termina no canto mais próximo farthest side termina na borda mais distante farthest corner termina no canto mais distante este é o padrão exemplo de gradientes radiais com tamanho especificado doctype html html head title title of the document title style gradient1 height 150 px width 150 px background color blue background image radial gradient closest side at 60 55 ff0509 fff700 103601 gradient2 height 150 px width 150 px background color blue background image radial gradient farthest side at 60 55 ff0509 fff700 103601 gradient3 height 150 px width 150 px background color blue background image radial gradient closest corner at 60 55 ff0509 fff700 103601 gradient4 height 150 px width 150 px background color blue background image radial gradient farthest corner at 60 55 ff0509 fff700 103601 style head body h2 closest side h2 div class gradient1 div h2 farthest side h2 div class gradient2 div h2 closest corner h2 div class gradient3 div h2 farthest corner h2 div class gradient4 div body html copiar experimente você mesmo gradiente radial repetido repeating radial gradient repete o padrão radial para fora em anéis a partir do centro assim como na versão linear a posição do último ponto de cor define o tamanho de um anel exemplo de gradiente radial repetido doctype html html head style gradient height 200 px width 200 px background color blue background image repeating radial gradient f70000 f7da00 10 005cfa 15 style head body div class gradient div body html copiar experimente você mesmo gradientes cônicos um gradiente cônico gira suas cores em torno de um ponto central como os ponteiros de um relógio varrendo o espectro enquanto um gradiente radial muda de cor conforme você se move para fora um gradiente cônico muda de cor conforme você se move ao redor isso o torna a ferramenta natural para gráficos de pizza rodas de cores e acentos angulares sintaxe do gradiente cônico background image conic gradient color1 color2 copiar os pontos de cor são posicionados por ângulo deg em vez de comprimento o gradiente começa no topo 0deg e varre no sentido horário exemplo de gradiente cônico básico doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background conic gradient ff0000 fff200 style head body div class gradient div body html copiar experimente você mesmo posicionando o centro cônico assim como nos gradientes radiais a palavra chave at move o ponto central da varredura usando porcentagens ou comprimentos absolutos exemplo de gradiente cônico com centro posicionado doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background conic gradient at 0 50 red 10 yellow 30 1eff00 60 style head body div class gradient div body html copiar experimente você mesmo alterando o ângulo a palavra chave from rotaciona toda a varredura deslocando o ponto de partida de 0deg exemplo de gradiente cônico com ângulo rotacionado doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background conic gradient from 35 deg ff0000 ffa600 fcf000 03ff0f be05fc ff0095 style head body div class gradient div body html copiar experimente você mesmo gradiente cônico repetido repeating conic gradient repete o padrão angular ao redor do círculo que é a forma clássica de criar efeitos de explosão estelar e tabuleiro de xadrez exemplo de gradiente cônico repetido doctype html html head title title of the document title style gradient height 250 px width 250 px background color blue background repeating conic gradient from 45 deg red 45 deg orange yellow green blue 225 deg style head body div class gradient div body html copiar experimente você mesmo suporte a navegadores e dicas gradientes lineares e radiais são suportados em todos os navegadores modernos gradientes cônicos são mais recentes funcionam em todas as versões atuais do chrome edge firefox e safari mas se você precisar dar suporte a navegadores muito antigos combine o gradiente com um fallback de background color sólido como mostrado anteriormente algumas dicas práticas empilhe gradientes a propriedade background image aceita uma lista separada por vírgulas então você pode sobrepor vários gradientes o primeiro listado fica no topo combine gradientes transparentes com uma foto para criar sobreposições use hsl para transições mais suaves a interpolação entre matizes muito diferentes em hexadecimal pode passar por cinzas opacos escolher matizes próximos ou usar hsl mantém as transições limpas desempenho gradientes são leves mas animá los repinta o elemento inteiro prefira animar transform opacity em vez do próprio gradiente para movimentos suaves tópicos relacionados background image a propriedade à qual os gradientes são mais frequentemente aplicados background size controle o tamanho de uma camada de gradiente para habilitar repetição em mosaico cores css e nomes de cores css os valores de cor que você coloca dentro dos gradientes transições css para animar outras propriedades junto com fundos de gradiente prática prática quais tipos de gradientes css são mencionados na página quais tipos de gradientes css são mencionados na página gradientes lineares gradientes circulares gradientes radiais gradientes elípticos gradientes repetidos verificar was this page helpful yes no previous nomes de cores css next guia do flexbox on this page gradientes lineares gradientes radiais gradientes cônicos suporte a navegadores e dicas tópicos relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generato...