La versión corta
- Las formas con degradado parecen tridimensionales cuando todas las formas del diseño están sombreadas desde la misma fuente de luz imaginaria.
- Una esfera convincente tiene cinco zonas: un brillo, un lado iluminado, una sombra propia, una banda de luz reflejada cerca del borde y una sombra proyectada debajo.
- En CSS, una esfera es un elemento circular con un degradado radial cuyo centro se desplaza hacia la luz, por ejemplo
circle at 30% 30%. - Los blobs y las formas orgánicas pueden hacerse con valores desiguales de
border-radiusy sombrearse con el mismo degradado radial que una esfera. - Las sombras deben ser una versión más oscura y fría del propio color de la forma, no gris ni negro.
En esta página
Las formas con degradado son blobs, orbes, esferas y píldoras rellenas de una mezcla que las hace parecer iluminadas, como si tuvieran volumen. Parecen reales cuando el sombreado sigue una sola fuente de luz: un brillo intenso en el lado que mira a la luz, una sombra propia más oscura en el lado opuesto, un tenue borde de luz reflejada justo en el contorno y una sombra suave en el suelo. Si te saltas alguna, la forma se lee como una pegatina plana con un degradado. Si las haces bien, dos colores bastan para sugerir un objeto sólido.
Cómo cae la luz sobre una forma redonda
Los pintores lo llevan describiendo siglos, y se aplica a cualquier forma redonda que dibujes. Elige la dirección de la luz antes que el color y luego sombrea cada zona en orden. Arriba a la izquierda es la convención porque es lo que el lector espera, pero cualquier dirección funciona si eres coherente.
Color
Dónde está
Color
Dónde está
Color
Dónde está
Color
Dónde está
Color
Recetas de sombreado para copiar
Estas muestras son estudios de iluminación: el sombreado que pondrías dentro de un círculo, un cilindro o un cono. Todas están iluminadas desde arriba a la izquierda. Aplícalas a una forma con esquinas redondeadas y se convierten en objetos sólidos.
Las recetas de esfera terminan en un color algo más claro que el anterior. Esa última parada es el borde reflejado, colocado justo dentro del contorno del círculo para que sobreviva al recorte. Sin él, el borde de la forma queda muerto y parece un agujero en lugar de una bola. La guía de degradados radiales explica cómo la posición del centro y el tamaño cambian la caída.
Cómo hacer una esfera con degradado en CSS
Convierte el elemento en un círculo con border-radius: 50% y desplaza el centro del degradado hacia la luz. El círculo recorta el degradado, así que el brillo queda descentrado dentro de una forma perfectamente redonda. Una elipse desenfocada y aplastada debajo hace de sombra proyectada.
.sphere {
width: 240px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 30% 28%,
#f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
position: relative;
}
.sphere::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -14%;
height: 12%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
filter: blur(6px);
z-index: -1;
}
.blob {
width: 280px;
aspect-ratio: 1;
border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
background: radial-gradient(circle at 32% 30%,
#fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}Blobs, píldoras y formas orgánicas
Los blobs se leen como amables y suaves, por eso son populares en marcas de bienestar, comida, infancia y creatividad. Siguen las mismas reglas de iluminación que una esfera, pero sus abultamientos captan brillos en más de un sitio. Mantén un brillo principal y deja los demás tenues. Hay más sobre el estilo en formas orgánicas en diseño.
- Píldora: un rectángulo redondeado sombreado como un cilindro, con la luz recorriendo su longitud.
- Guijarro: una esfera aplastada, con un brillo amplio y de poco contraste, como piedra mate.
- Gota: una esfera con un brillo intenso y nítido y un fuerte borde reflejado, que se lee como brillante.
- Blob nube: círculos solapados con un único brillo compartido, para que se lean como una sola forma.
Por qué las formas con degradado parecen planas y cómo arreglarlo
Parece plana
- Brillo en el centro exacto, como iluminada desde el espectador
- Cada forma iluminada desde un lado distinto
- Sombras grises o negras
- Borde duro entre la luz y la sombra
- Sin sombra proyectada, así que las formas flotan
Parece sólida
- Brillo desplazado hacia una fuente de luz
- Todas las formas comparten la misma luz
- Sombras de un tono más profundo y frío del color
- Un giro largo y gradual hacia la sombra propia
- Una sombra suave ancla cada forma a una superficie
La temperatura de color hace gran parte del trabajo. La luz cálida da sombras frías y la luz fría da sombras cálidas. Una esfera violeta con un brillo ligeramente rosado y una sombra propia violeta azulada parece mucho más real que una que simplemente va de violeta claro a violeta oscuro. Colores cálidos y fríos explica la combinación.
Cómo usar formas con degradado en una composición
- 1
Elige una sola fuente de luz
Anótala: arriba a la izquierda, cálida. Todas las formas, sombras y brillos la siguen.
- 2
Usa tres tamaños
Una forma grande, una mediana y una pequeña se leen como profundidad. Cinco blobs iguales se leen como confeti.
- 3
Deja que las formas salgan del encuadre
Recortar la forma más grande en un borde hace que el lienzo parezca más grande que sus límites.
- 4
Guarda una zona tranquila para el texto
Las formas son recargadas. Ponlas alrededor del titular, nunca detrás.
- 5
Añade grano
Una capa de ruido fino hace que el sombreado digital liso parezca impreso y oculta las bandas. Consulta degradados con grano.
Un post de producto a 1080×1350. Formas redondeadas e iluminadas alrededor de las palabras, con el titular sobre un fondo tranquilo.
Si prefieres no sombrear formas a mano, los Marks de Gradiently son fondos vivos construidos con materiales, luz y grano superpuestos, y se renderizan limpios a cualquier tamaño en el que diseñes. Para una sola esfera luminosa usada como imagen principal, consulta orbes de degradado.
Preguntas frecuentes
¿Cómo hago que una forma con degradado parezca 3D?
Sombréala desde una sola fuente de luz: un brillo en el lado iluminado, una sombra propia más oscura en el lado opuesto, un borde algo más claro en el contorno en sombra y una sombra proyectada suave debajo.
¿Cómo se hace una esfera con un degradado CSS?
Da a un elemento border-radius: 50% y un radial-gradient(circle at 30% 30%, ...) que vaya de casi blanco al color principal y a un tono oscuro. Desplazar el centro hacia la luz descentra el brillo.
¿Cómo hago una forma de blob en CSS?
Usa ocho valores desiguales de border-radius, como 62% 38% 46% 54% / 55% 42% 58% 45%, y rellénala con un degradado radial.
¿De qué color debe ser la sombra de una forma con degradado?
Una versión más oscura y algo más fría del propio color de la forma. Las sombras grises o negras hacen que las formas de color parezcan sucias.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil