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):
margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background 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 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 grad...
|
