Meta tags:
description=Los gradientes CSS muestran transiciones progresivas entre dos o más colores. Aprende los tipos de gradientes, su uso y ve numerosos ejemplos.;

Headings (most frequently used words):

de, gradiente, ejemplo, un, del, lineal, con, radial, cónico, gradientes, repetido, colores, izquierda, derecha, múltiples, centro, radiales, sintaxis, posicionamiento, color, ángulo, arriba, hacia, abajo, paradas, forma, tamaño, especificado, posicionado, css, lineales, cónicos, soporte, navegadores, consejos, temas, relacionados, práctica, diagonales, uso, ángulos, transparencia, tres, las, básico, cambio, diagonal, sólido, transparente, espaciado, diferente, la, rotado,

Text of the page (most frequently used words):
color (68), background (67), html (64), gradient (64), title (54), style (53), #gradiente (46), div (46), image (39), body (38), head (38), css (35), gradientes (35), border (35), una (29), con (28), del (28), width (28), height (27), los (25), class (24), blue (23), radial (23), colores (22), copiar (22), text (21), para (20), que (20), ejemplo (20), font (20), pruébalo (19), mismo (19), doctype (19), the (18), document (18), grid (18), aprender (15), por (15), right (15), 250 (14), column (13), linear (12), left (12), bottom (12), lineal (11), cuadro (10), 150 (10), position (10), línea (10), break (10), puede (9), las (9), cónico (9), forma (9), clave (9), centro (9), top (9), animation (9), radiales (8), más (8), palabra (8), hacia (8), stroke (8), desde (7), lineales (7), tamaño (7), size (7), deg (7), repeating (7), ángulo (7), farthest (7), corner (7), side (7), fff700 (7), ff0509 (7), 0052b0 (7), 300 (7), overflow (7), decoration (7), offset (7), flex (7), page (6), lugar (6), conic (6), repetido (6), punto (6), paradas (6), 200 (6), closest (6), cada (6), last (6), derecha (6), dirección (6), arriba (6), align (6), padding (6), margin (6), type (6), variant (6), w3docs (5), práctica (5), navegadores (5), transform (5), entre (5), repite (5), central (5), termina (5), dos (5), cualquier (5), múltiples (5), izquierda (5), abajo (5), direction (5), list (5), transition (5), line (5), outline (5), radius (5), child (5), formatter (5), generator (4), ejemplos (4), cónicos (4), transiciones (4), son (4), muy (4), hsl (4), lista (4), valor (4), yellow (4), red (4), patrón (4), alrededor (4), sintaxis (4), posición (4), gradient2 (4), gradient1 (4), 103601 (4), esquina (4), borde (4), circle (4), predeterminada (4), b340b3 (4), imagen (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), cuestionarios (3), ejercicios (3), php (3), javascript (3), soporte (3), consejos (3), nombres (3), qué (3), tipos (3), página (3), mosaico (3), propiedad (3), pero (3), todo (3), usa (3), combina (3), sólido (3), como (3), green (3), from (3), círculo (3), 0deg (3), igual (3), posicionamiento (3), longitud (3), parte (3), sentido (3), reloj (3), última (3), parada (3), ellipse (3), elipse (3), 05ff33 (3), tres (3), shape (3), start (3), rgba (3), ff0856 (3), 520f41 (3), 66f507 (3), f7df00 (3), f56e00 (3), f50707 (3), apunta (3), uso (3), largo (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), ver (3), string (3), tools (3), todos (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), temas (2), relacionados (2), this (2), guía (2), flexbox (2), circulares (2), mencionan (2), animar (2), propiedades (2), fondos (2), mayor (2), frecuencia (2), opacity (2), tonos (2), hexadecimal (2), usar (2), mantiene (2), acepta (2), comas (2), pueden (2), transparentes (2), crear (2), superposiciones (2), dar (2), antiguos (2), reserva (2), ff0000 (2), rota (2), barrido (2), inicio (2), posicionado (2), usando (2), porcentajes (2), longitudes (2), absolutas (2), superior (2), agujas (2), color1 (2), color2 (2), cambia (2), moverse (2), esto (2), convierte (2), afuera (2), gradient4 (2), gradient3 (2), especificado (2), dónde (2), hasta (2), fijar (2), porcentaje (2), absoluta (2), opcional (2), primer (2), último (2), tener (2), estirarlo (2), sola (2), vez (2), útil (2), 253 (2), 117 (2), 235 (2), transparente (2), ser (2), alfa (2), completamente (2), esta (2), legible (2), sobre (2), crea (2), fluyen (2), ángulos (2), rotan (2), 90deg (2), diagonal (2), vertical (2), texto (2), funciona (2), función (2), transición (2), recta (2), sin (2), también (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, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, web, 2014, next, previous, yes, was, helpful, comprobar, repetidos, elípticos, otras, junto, valores, colocan, dentro, controla, capa, habilitar, aplican, económicos, animarlos, vuelve, pintar, prefiere, lograr, movimiento, fluido, rendimiento, interpolar, diferentes, pasar, grises, apagados, elegir, cercanos, limpias, suaves, separada, superponer, varios, primero, queda, encima, foto, apila, algunos, prácticos, compatibles, modernos, recientes, funcionan, todas, versiones, actuales, chrome, edge, firefox, safari, necesario, mostró, anteriormente, 225, orange, angular, clásica, efectos, ráfaga, estrellas, tableros, ajedrez, ff0095, be05fc, 03ff0f, fcf000, ffa600, rotado, desplazando, cambio, 1eff00, mueve, fff200, básico, posicionan, comienza, avanza, sus, manecillas, barriendo, espectro, mientras, herramienta, natural, gráficos, ruedas, acentos, angulares, 005cfa, f7da00, f70000, anillos, versión, determina, anillo, lejana, este, predeterminado, lejano, cercana, cercano, decide, decir, extiende, antes, finalizar, existen, cuatro, palabras, medidas, parámetro, estira, coincidir, relación, aspecto, perfectamente, redondo, independientemente, ancho, alto, mover, fuera, espaciado, diferente, controlar, porción, radio, ocupa, omite, obtiene, centrada, irradia, necesitan, menos, 036ffc, 6c008a, d5b6de, repetición, define, aquí, resulta, franjas, texturas, barras, progreso, parcial, totalmente, cual, difuminar, fondo, haya, detrás, canal, establece, opaco, estándar, colocar, superposición, fotografía, transparencia, combinar, específica, final, posiciones, franja, sólida, ese, ellas, 100, número, distribuyen, uniforme, manera, mezclándose, suavemente, siguiente, control, total, indicar, mide, negativos, antihorario, 180deg, horizontal, vaya, diagonales, añade, rotar, modo, esté, izquierdo, derecho, declaración, entienden, ignoran, recurren, siga, siendo, consejo, van, omitir, completo, sigue, separados, válido, incluidos, nombre, rgb, cuyos, hacen, controlan, cosas, esa, colocadas, ella, inferior, tiene, variante, irradian, cubre, funciones, definidas, ejecutables, independientes, resolución, escalan, perder, calidad, generan, solicitudes, http, adicionales, alternativa, ligera, archivos, botones, formas, decorativas, generada, navegador, muestra, suave, progresiva, especificados, técnicamente, donde, espere, mask, muestran, progresivas, aprende, numerosos, zoom, index, writing, will, change, widows, white, space, user, select, bidi, property, underline, orientation, indent, ink, combine, 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, selectores, selectors, css3, guides, tablas, links, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
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 los gradientes css muestran transiciones progresivas entre dos o más colores aprende los tipos de gradientes su uso y ve numerosos ejemplos un gradiente css es una imagen generada por el navegador que muestra una transición suave y progresiva entre dos o más colores especificados como un gradiente es técnicamente una image se puede usar en cualquier lugar donde css espere un valor de imagen con mayor frecuencia en la propiedad background image pero también funciona para border image list style image y mask image los gradientes son independientes de la resolución escalan a cualquier tamaño sin perder calidad y no generan solicitudes http adicionales lo que los convierte en una alternativa ligera a los archivos de imagen para fondos botones superposiciones y formas decorativas esta página cubre las tres funciones de gradiente definidas por css con ejemplos ejecutables para cada una gradientes lineales los colores fluyen a lo largo de una línea recta gradientes radiales los colores irradian desde un punto central gradientes cónicos los colores rotan alrededor de un punto central cada función también tiene una variante repeating que repite el gradiente en mosaico en lugar de estirarlo una sola vez por el cuadro gradientes lineales la función linear gradient crea una imagen cuyos colores hacen una transición a lo largo de una línea recta se controlan dos cosas la dirección de esa línea y la lista de paradas de color colocadas a lo largo de ella sin dirección la línea va desde la parte superior del cuadro hasta la inferior sintaxis del gradiente lineal background image linear gradient direction color1 color2 copiar direction es opcional puede ser una palabra clave to right to bottom left o un ángulo 90deg todo lo que sigue es la lista de colores separados por comas cualquier color css válido funciona incluidos colores con nombre hexadecimal rgb y hsl de arriba hacia abajo los gradientes lineales van de arriba hacia abajo de forma predeterminada por lo que se puede omitir la dirección por completo ejemplo de un gradiente lineal de arriba hacia abajo 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 pruébalo tú mismo consejo la declaración background color es un valor de reserva los navegadores muy antiguos que no entienden el gradiente ignoran la línea background image y recurren al color sólido para que el texto siga siendo legible de izquierda a derecha añade la palabra clave to right para rotar la línea de modo que el primer color esté en el borde izquierdo y el último en el derecho ejemplo de un gradiente lineal de izquierda a derecha 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 pruébalo tú mismo gradientes diagonales combina una palabra clave vertical y una horizontal por ejemplo to bottom right para que la línea vaya en diagonal por el cuadro de esquina a esquina ejemplo del 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 pruébalo tú mismo uso de ángulos para tener control total sobre la dirección se puede indicar un ángulo en lugar de una palabra clave el ángulo se mide en el sentido de las agujas del reloj desde la dirección arriba 0deg apunta la línea del gradiente hacia arriba los colores fluyen de abajo hacia arriba 90deg la apunta a la derecha de izquierda a derecha 180deg apunta hacia abajo los ángulos negativos rotan en sentido antihorario ejemplo de un gradiente lineal con un á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 pruébalo tú mismo múltiples colores un gradiente acepta cualquier número de colores se distribuyen de forma uniforme de manera predeterminada con cada color mezclándose suavemente con el siguiente ejemplo de un gradiente lineal con múltiples colores 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 pruébalo tú mismo se puede combinar una dirección con múltiples colores y se puede fijar cada color en una posición específica una posición es un porcentaje 0 es el inicio de la línea 100 es el final o una longitud absoluta dar dos posiciones a un color crea una franja sólida de ese color entre ellas ejemplo de un gradiente lineal con múltiples colores de izquierda a derecha 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 pruébalo tú mismo ejemplo de un gradiente lineal con múltiples colores de derecha a izquierda 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 pruébalo tú mismo transparencia las paradas de color pueden ser parcial o totalmente transparentes lo cual es útil para difuminar un fondo con lo que haya detrás se usa rgba o cualquier color con canal alfa y se establece el alfa entre 0 completamente transparente y 1 completamente opaco esta es la forma estándar de colocar una superposición legible sobre una fotografía ejemplo de un gradiente lineal de color sólido a 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 pruébalo tú mismo gradiente lineal repetido repeating linear gradient repite un patrón de gradiente en mosaico por el cuadro en lugar de estirarlo una sola vez el tamaño de una repetición se define por la posición de la última parada de color aquí 10 por lo que el patrón de tres colores se repite cada 10 de la línea esto resulta muy útil para franjas y texturas de barras de progreso ejemplo de un gradiente lineal 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 pruébalo tú mismo gradientes radiales un gradiente radial irradia desde un punto central con el primer color en el centro y el último en el borde se necesitan al menos dos paradas de color el gradiente puede tener forma de circle círculo o de ellipse elipse que es la forma predeterminada sintaxis del gradiente radial background image radial gradient shape size at position start color last color copiar la parte shape size at position es opcional si se omite se obtiene una elipse farthest corner centrada en el cuadro ejemplo de un gradiente radial con tres colores 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 pruébalo tú mismo posicionamiento de las paradas de color radiales al igual que con los gradientes lineales se puede fijar cada color en un porcentaje o longitud absoluta para controlar qué porción del radio ocupa ejemplo de paradas de color con espaciado 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 pruébalo tú mismo posicionamiento del centro se usa la palabra clave at para mover el centro del gradiente fuera del centro del cuadro usando porcentajes o longitudes absolutas ejemplo de un gradiente radial con 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 pruébalo tú mismo forma del gradiente radial el parámetro de forma es circle o ellipse una elipse la predeterminada se estira para coincidir con la relación de aspecto del cuadro un círculo se mantiene perfectamente redondo independientemente del ancho y alto del cuadro ejemplo de la forma del 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 pruébalo tú mismo tamaño del gradiente radial la palabra clave de tamaño decide dónde termina la última parada de color es decir hasta dónde se extiende el gradiente antes de finalizar existen cuatro palabras clave medidas desde el centro del gradiente closest side termina en el borde más cercano del cuadro closest corner termina en la esquina más cercana farthest side termina en el borde más lejano farthest corner termina en la esquina más lejana este es el valor predeterminado ejemplo de gradientes radiales con tamaño 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 pruébalo tú mismo gradiente radial repetido repeating radial gradient repite el patrón radial hacia afuera en anillos desde el centro al igual que la versión lineal la posición de la última parada de color determina el tamaño de un anillo ejemplo del 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 pruébalo tú mismo gradientes cónicos un gradiente cónico rota sus colores alrededor de un punto central como las manecillas de un reloj barriendo el espectro mientras que un gradiente radial cambia de color al moverse hacia afuera un gradiente cónico cambia de color al moverse alrededor esto lo convierte en la herramienta natural para gráficos circulares ruedas de color y acentos angulares sintaxis del gradiente cónico background image conic gradient color1 color2 copiar las paradas de color se posicionan por ángulo deg en lugar de longitud el gradiente comienza en la parte superior 0deg y avanza en el sentido de las agujas del reloj ejemplo de un 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 pruébalo tú mismo posicionamiento del centro cónico al igual que con los gradientes radiales la palabra clave at mueve el punto central del barrido usando porcentajes o longitudes absolutas ejemplo de un gradiente cónico con 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 pruébalo tú mismo cambio del ángulo la palabra clave from rota todo el barrido desplazando el punto de inicio en 0deg ejemplo de gradiente cónico con ángulo rotado 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 pruébalo tú mismo gradiente cónico repetido repeating conic gradient repite el patrón angular alrededor del círculo que es la forma clásica de crear efectos de ráfaga de estrellas y tableros de ajedrez ejemplo del gradiente cónico repetido doctype html ht...