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):
nd position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom gradientes css gradientes css exibem transições progressivas entre duas ou mais cores saiba sobre os tipos de gradientes uso e veja exemplos um gradiente css é uma imagem gerada pelo navegador que exibe uma transição suave e progressiva 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...
|
