Una vez perdí la mayor parte de una tarde debido a un gradiente. No es complicado: un trasfondo de héroe en una página de marketing de WP Adminify, el azul de la marca se desvanece en naranja de la marca, en diagonal. Escribí linear-gradient(45deg, #4466EE, #E99537) Y fue por el camino equivocado. así que lo intenté -45deg. También mal. de entonces 135deg, lo cual fue correcto, y seguí adelante sin entender por qué, que es el peor resultado posible porque te garantiza que te equivocarás de nuevo.
La razón es que los ángulos de gradiente CSS no son los ángulos que aprendiste en la clase de matemáticas. 0deg agujas en plena forma, y el ángulo aumenta en el sentido de las aguja. En trigonometría - y en SVG, y en lienzo - 0 puntos rectos y los ángulos aumentan en sentido antihorario. Dos convenciones diferentes, una de aspecto idéntico deg unidad, y ningún mensaje de error cuando elige el incorrecto. Está escrito claramente en Módulo de imágenes CSS Nivel 3, y simplemente nunca lo había leído.
Ese es el caso de un generador visual en una anécdota. los Generador de gradiente en Toolz.dev le ofrece una vista previa en vivo, paradas de color arrastrables y CSS copiable para gradientes lineales, radiales y cónicos, por lo que la pregunta del ángulo responde sola en lugar de costarle una tarde.
TL;Dr: en CSS,
0degpuntos a la parte superior y los ángulos corren en el sentido de las aguja, entoncesto rightigual90degy una diagonal superior izquierda → abajo derecha es135deg, no45deg. aprovechamiento Generador de gradiente verlo en lugar de adivinarlo, y el selector de colores Para elegir paradas que no se enlodan en el medio. Los gradientes son<image>valores: en cualquier lugar que puedas utilizarurl(), puede usar un degradado. Todo el lado del cliente, sin registro.
¿Qué es un gradiente CSS, técnicamente?
Un degradado no es un color. es un image. Ese único hecho explica la mayor parte de la sintaxis.
por CSS Imágenes Nivel 3, linear-gradient(), radial-gradient(), y sus variantes repetitivas producen un valor de tipo <image>. Eso significa que en cualquier lugar que acepte la especificación url('photo.jpg'), también acepta un gradiente: background-image, border-image, list-style-image, mask-image, content. También significa que los gradientes tienen Sin dimensiones intrínsecas- se estiran para llenar la caja en la que los pones, razón por la cual el mismo degradado se ve diferente en un botón de 200px y en un héroe de 1400px.
conic-gradient() vino después y vive en CSS Imágenes Nivel 4, junto con la sintaxis de interpolación-espacio en color, llegaré a continuación.
¿Cuál es la diferencia entre lineal, radial y cónico?
| lineal | radial | en forma cónica | |
|---|---|---|---|
| Viajes de color | en línea recta | hacia afuera desde un punto central | Alrededor de un punto central |
| Definido por | un ángulo o to <side> |
forma (circle/ellipse), tamaño, posición |
Ángulo de inicio, posición |
| alcanzarlo cuando | Fondos, botones, superposiciones, recubrimientos de imagen | Focos, resplandores, viñetas, fondos de malla | Gráficos circulares, ruedas de color, anillos de progreso, sectores de bordes duros |
| especulación | imágenes 3 | imágenes 3 | imágenes 4 |
| El truco de parada dura te da | rayas | aros | Rebanadas de tarta |
| te tengo | La convención de ángulo | Las palabras clave de tamaño lo cambian todo | Los ángulos aquí también están en el sentido de las agujas del reloj desde las 12 horas |
Gradientes lineales y convención de ángulos
/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);
/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);
/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537); /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537); /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537); /* top-left → bottom-right */
Consigue esto a la memoria y nunca repetirás mi tarde:
| palabra clave | faceta |
|---|---|
to top |
0deg |
to right |
90deg |
to bottom |
180deg (el valor predeterminado) |
to left |
270deg |
Hay una sutileza más con las palabras clave de las esquinas. to bottom right tiene que hacer no simplemente significa 135deg. La especificación lo define como un ángulo elegido para que la línea de gradiente sea perpendicular a la de otra manera que diagonal, que significa en un cuadro no cuadrado to bottom right y 135deg producir resultados visiblemente diferentes. En un cuadrado son idénticos. Ese es el tipo de cosas que notas a las 11 p. m. cuando una tarjeta se ve bien en el diseño y está mal en una columna estrecha.
Gradientes radiales: donde viven las palabras clave de tamaño
/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);
/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);
/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);
Las cuatro palabras clave de tamaño deciden dónde final Paradas de color, medidas desde el centro:
closest-side- el borde más cercano de la cajafarthest-side- el borde más lejanoclosest-corner- la esquina más cercanafarthest-corner- la esquina más alejada (Este es el valor predeterminado)
Cambie la palabra clave y el degradado parece un degradado diferente. Esta es la razón más común por la que un gradiente radial "no hará lo que quiero", y es mucho más rápido hacer clic en las cuatro opciones en el Generador de gradiente que razonar al respecto.
Gradientes cónicos: pasteles, ruedas y anillos
Color de barrido cónico por aquí el centro, comenzando a las 12 o'reloj y yendo en el sentido de las agujas del reloj (misma convención que lineal, al menos es consistente 's).
/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
#4466EE 0deg 144deg,
#E99537 144deg 270deg,
#34D399 270deg 360deg
);
/* Progress ring: conic + a mask */
.ring {
background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
mask: radial-gradient(circle, transparent 60%, #000 61%);
border-radius: 50%;
}
aquello mask La línea es todo el truco detrás de cada indicador de progreso de la dona que hayas visto, y se trata de seis líneas de CSS en lugar de una biblioteca SVG.
¿Cómo controlo dónde caen los colores?
Paradas de color
Dale una posición a una parada y controlas la transición. dar una parada dos posiciones y obtienes una ventaja dura, sin interpolación alguna.
/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);
/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);
/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
to right,
#4466EE 0 25%,
#E99537 25% 50%,
#34D399 50% 75%,
#0F172A 75% 100%
);
Sugerencias de interpolación (el punto medio que no sabías que podías moverte)
un porcentaje desnudo en medio de Dos colores mueve el punto medio 50/50. Esta es la pieza de sintaxis degradado más infrautilizada que conozco:
/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);
/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);
Úsalo para las grabaciones de imágenes. un to top, rgba(0,0,0,.8), transparent la superposición generalmente come demasiado de la foto; suelte un 35% Insinúa y la oscuridad se derrumba hacia el fondo donde está el título.
Repetición de gradientes para patrones
.hatched {
background: repeating-linear-gradient(
45deg,
#0F172A 0 10px,
#1E293B 10px 20px
);
}
Una línea, sin archivo de imagen, infinitamente escalable. Simplemente don' No lo apliques a un elemento de página completa y luego te preguntes por qué desplazarse tartamudea en un Android de gama media; volver a pintar un gran gradiente repetido durante el desplazamiento es un trabajo real para el compositor.
¿Por qué mi degradado se ve turbio en el medio?
Dos causas separadas, y las personas las combinan constantemente.
Causa 1: Interpolación sRGB
De forma predeterminada, los navegadores combinan paradas de gradiente en sRGB, canal por canal. Para dos colores que se encuentran cerca uno del otro en la rueda (de azul a morado, de naranja a rojo), eso ' está bien. Para colores complementarios produce una banda gris muerta en el medio, debido al punto medio matemático de dos colores sRGB opuestos es aproximadamente gris. Azul a amarillo es el delincuente clásico.
CSS Images Level 4 corrige esto permitiéndole nombrar el espacio de interpolación:
/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);
/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);
oklch Mantiene la ligereza percibida y el croma estables en toda la mezcla. Soporte del navegador para el in <colorspace> La sintaxis es buena en Chrome, Safari y Firefox actuales, pero si necesita admitir navegadores más antiguos, la opción de respaldo es la antigua solución manual: agregue una parada intermedia y dirija la mezcla usted mismo.
Causa 2: Desvanecimiento a transparent- y mi segundo error
transparent se define como rgba(0, 0, 0, 0). transparente ennegrecer. Si los navegadores interpolan ingenuamente, linear-gradient(#E99537, transparent) se deslizaría a través de un naranja grisáceo progresivamente más oscuro y en su camino a la nada.
Los navegadores modernos don't hacen eso: la especificación requiere interpolación premultiplicado Espacio alfa, que elude el problema por completo. Pero el Webkit anterior no lo hizo, y envié un héroe en un sitio del cliente que se veía limpio en mi máquina y parecía una mancha sucia en su iPad de dos años. La versión a prueba de balas, que no te cuesta nada y sigue funcionando en todas partes:
/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));
Todavía lo escribo de esa manera fuera del tejido cicatricial.
¿Qué debo tener en cuenta con accesibilidad?
El contraste tiene que mantenerse en todo el degradado
WCAG 2.1 SC 1.4.3 Requiere 4.5:1 para texto normal y 3:1 para texto grande (18 puntos o 14 puntos en negrita). Un degradado significa que su color de fondo es diferente en cada píxel, por lo que el requisito debe cumplirse contra el en el peor de los casos punto: el parche más claro si su texto es blanco, el más oscuro si es negro.
El patrón confiable es dejar de intentar hacer que el gradiente en sí sea legible y colocar una capa en la parte superior:
.hero {
background:
linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
linear-gradient(135deg, #4466EE, #E99537);
color: #fff;
}
Ahora el texto se encuentra en un rango oscuro conocido independientemente de lo que esté haciendo el degradado debajo. Compruebe los extremos con el selector de colores antes de realizar el envío, el tutorial de contraste completo, incluido el color de la marca que envié en 2,38:1, está en el Guía de selector de color.
El texto degradado es una trampilla
Este es el que realmente me quemó en una página de destino de producción:
.gradient-heading {
background: linear-gradient(135deg, #4466EE, #E99537);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
cuando background-clip: text no ' No se aplica por ningún motivo: un navegador antiguo, una extensión que bloquea imágenes de fondo, una hoja de estilo de impresión; usted ' Me queda color: transparent y un Título invisible. El texto todavía está en el DOM, por lo que un lector de pantalla lo lee felizmente y no tienes idea de que algo anda mal. aprovechamiento @supports Para cerrarlo:
.gradient-heading { color: #0F172A; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.gradient-heading {
background: linear-gradient(135deg, #4466EE, #E99537);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
Color sólido De forma predeterminada, degradado como mejora. Así es como debería haberse escrito la primera vez.
Los gradientes animados necesitan una escotilla de escape de movimiento
No puedes hacer un gradiente de transición colores del mundo- el navegador won't interpola entre dos <image> valores. Lo que la gente anima en cambio es background-position A través de un gradiente de gran tamaño:
.animated {
background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
background-size: 600% 600%;
animation: shift 12s ease infinite;
}
@keyframes shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.animated { animation: none; }
}
Ese último bloque no es opcional. El movimiento continuo de fondo es un desencadenante documentado de los trastornos vestibulares y el honor prefers-reduced-motion es de tres líneas.
(La alternativa moderna es registrar una propiedad personalizada con @property Por lo tanto su tipo es conocido y por lo tanto Animable, luego usándolo dentro del degradado. Es limpio, es compatible con los navegadores actuales, y todavía vale la pena tener el protector de movimiento reducido.)
¿Cómo construyo uno con la herramienta?
- Abre el Generador de gradiente.
- Elija un tipo: lineal, radial o cónico.
- Haga clic en una parada para cambiar su color; arrástrelo para mover su posición. Haga clic en la barra para agregar una parada; arrástrela para eliminarla.
- Para lineal, arrastre el ángulo. Mira el número: aquí es donde el
0deg-Is-Up Convención deja de ser abstracto. - Para radial, enciclos las cuatro palabras clave de tamaño y observe qué cambia. Es la forma más rápida de construir intuición para ellos.
- Copie el CSS.
Dos colores suele ser la respuesta correcta. Cada gradiente que he lamentado tuvo cinco paradas.
Gradientes que vale la pena robar
/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);
/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);
/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);
/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);
/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
Introduzca sus propios colores de marca en el selector de colores primero, tome los valores de HSL, luego varíe la ligereza en lugar del tono - that's cómo se obtienen paradas que se mezclan limpiamente en lugar de luchar.
Preguntas frecuentes
¿Por qué mi gradiente CSS va en la dirección equivocada?
Debido a que los ángulos de gradiente CSS comienzan en el parte superior y aumentar en el sentido de las aguja, a diferencia de la trigonometría, SVG o lienzo, que comienzan a la derecha y van en sentido contrario a las agujas del reloj. to right es 90deg, to bottom es 180deg, y una diagonal de arriba a la izquierda a la derecha es 135deg, no 45deg.
¿Todavía necesito -webkit- ¿Prefijos para gradientes CSS?
no para linear-gradient(), radial-gradient(), o conic-gradient()- los tres funcionan sin prefijo en todos los navegadores actuales. El único lugar donde el prefijo aún se mantiene es -webkit-background-clip: text Para texto degradado, donde lo necesita Safari antiguo. enviar ambas declaraciones allí.
¿Puedo animar un degradado CSS?
No el valor del gradiente en sí: un gradiente es un <image>, y el navegador no interpolará entre dos imágenes. La solución estándar es hacer que el gradiente sea mucho más grande que su caja (background-size: 600% 600%) y animar background-position. El enfoque moderno registra una propiedad personalizada con @property Por lo tanto, tiene un tipo conocido y se vuelve animable dentro del gradiente. De cualquier manera, cuídalo con prefers-reduced-motion.
¿Por qué mi degradado se ve gris o embarrado en el medio?
Casi siempre interpolación sRGB entre colores que se encuentran uno frente al otro en la rueda: el azul al amarillo es el clásico. Su punto medio sRGB realmente está cerca del gris. Arreglalo nombrando un mejor espacio de interpolación linear-gradient(in oklch, to right, blue, yellow), o agregando una parada intermedia para dirigir la mezcla usted mismo.
¿Por qué se desvanece transparent parecer sucio?
transparent se define como rgba(0, 0, 0, 0)- transparente ennegrecer. Los navegadores actuales interpolan en el espacio alfa premultiplicado, por lo que esto ya no es un problema, pero Webkit más antiguo arrastraba el gradiente a través de Grey al salir. Si admite dispositivos antiguos, escriba la versión cero alfa de su propio color explícitamente: rgba(233, 149, 55, 0) en vez de transparent.
¿Cómo hago un borde de gradiente?
Dos opciones. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; es una línea pero mata en silencio border-radius. Si necesita esquinas redondeadas, coloque dos fondos con diferentes background-clip y background-origin valores, o poner el gradiente en un pseudoelemento detrás de la caja.
¿Son malos los gradientes CSS para el rendimiento?
Un gradiente estático es barato, más barato que descargar una imagen equivalente, y se escala a cualquier tamaño de forma gratuita. Los costos aparecen cuando es necesario un gradiente grande pintado de pelo repetidamente: un gradiente repetido de página completa durante el desplazamiento, o varios degradados en capas bajo un backdrop-filter. Si una página se siente pegajosa en el móvil, eso es lo primero que checo en DevTools Paint Profiler.
¿Cuántas paradas de color debe tener un degradado?
Dos, la mayor parte del tiempo. Tres cuando quieras dirigir la mezcla a través de un tono específico. Más allá de eso, generalmente buscas algo que un degradado de malla (varios radiales posicionados) funciona mejor, y cada parada adicional es una cosa más que puede verse mal en la pantalla de otra persona.
¿Cómo hago un fondo degradado en CSS?
Establecer el background (o background-image) propiedad a una función de gradiente. background: linear-gradient(to right, #4466EE, #E99537); Pinta una mezcla de izquierda a derecha sin ningún archivo de imagen. radial-gradient() y conic-gradient() Siga el mismo patrón para mezclas circulares y barridas. Debido a que el resultado se genera en lugar de descargarlo, se mantiene nítido en cualquier tamaño.
¿Cómo creo texto degradado en CSS?
Pon el gradiente background, luego establezca background-clip: text (con el -webkit- prefijo para safari) y color: transparent, por lo que las letras se llenan por el degradado en lugar de un color sólido. Mantenga el texto real en el marcado en lugar de hornearlo en una imagen, de modo que los lectores de pantalla se puedan seleccionar y leer.
envolviendo
Los degradados son una de las pocas características de CSS que le brindan una riqueza visual real sin costo de red: sin solicitud de imagen, sin problemas de relación de aspecto, independiente de la resolución por construcción. La sintaxis es pequeña. Las trampas son específicas y conocibles: la convención de ángulos, las palabras clave de tamaño radial, la confusión sRGB y la trampilla de rumbo invisible en texto degradado.
Constrúyelos donde puedas verlos. los Generador de gradiente es gratis, se ejecuta completamente en su navegador y copia CSS limpio. emparejarlo con el selector de colores Para las paradas que mantienen su contraste, y el Minifiero CSS Cuando estés listo para enlinearlo. El resto del estante de la interfaz está en el Guía de herramientas de productividad para desarrolladores.
