Generador CSS
Interfaz visual para diseñar sombras box-shadow multicapa, degradados lineales, radiales y cónicos, radios de borde por esquina y contenedores flexbox. Renderizado en tiempo real y exportación de código para producción.
Color de sombra
Ajustes predefinidos
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Renderizado y cálculo en tiempo real 100% en la memoria local del navegador: ningún token de diseño se transmite a servidores.
Instrucciones de uso del generador
- Seleccionar módulo: Navegue entre Sombra de caja, Degradado, Radio de borde o Flexbox mediante las pestañas superiores.
- Configurar valores y geometría: Ajuste los deslizadores para desplazamientos, desenfoque, extensión, ángulos, paradas o separaciones. Alterne modos interiores, enlaces de esquinas o ajustes de alineación según sus requisitos de diseño.
- Inspeccionar el lienzo en tiempo real: Observe el contenedor de previsualización en el lateral derecho para evaluar la atenuación óptica, transiciones cromáticas o distribución espacial.
- Copiar código para producción: Copie la declaración CSS formateada directamente desde el panel de salida para integrarla en sus hojas de estilo, CSS Modules o configuración de Tailwind CSS.
Especificaciones técnicas de los módulos y referencia sintáctica
Cada módulo implementa especificaciones estándar del W3C sin librerías externas. La tabla inferior resume las estructuras sintácticas, rangos paramétricos y comportamiento en el pipeline de renderizado del motor del navegador.
| Módulo | Propiedad CSS destino | Formato sintáctico formal | Fase del pipeline | Regla de implementación técnica |
|---|---|---|---|---|
| Sombra de caja (Box Shadow) | box-shadow | [inset] offset-x offset-y blur-radius spread-radius color | Fase de pintado (Raster / Paint) | Las capas separadas por comas se procesan de arriba hacia abajo. Use extensión negativa para mitigar la dispersión ambiental excesiva. |
| Degradados CSS (CSS Gradients) | background / background-image | linear-gradient() | radial-gradient() | conic-gradient() | Fase de pintado (Raster / Paint) | Se calcula como un recurso CSS <image>. El valor 0deg de W3C apunta hacia arriba; añadir paradas intermedias previene zonas grises en sRGB. |
| Radio de borde (Border Radius) | border-radius | top-left top-right bottom-right bottom-left [px | %] | Diseño y pintado (Layout / Paint) | Un valor saturado de 9999px garantiza extremos semicirculares perfectos sin distorsión ovalada por relación de aspecto. |
| Contenedor Flexbox (Flexbox Container) | display: flex | flex-direction, justify-content, align-items, flex-wrap, gap | Fase de diseño (Layout / Reflow) | La propiedad nativa gap elimina trucos con márgenes. La regla min-width: 0 en elementos hijos previene el desbordamiento horizontal del contenedor. |
Física de sombras: Oclusión por capas y realismo óptico
La luz física natural no proyecta un contorno oscuro borroso y homogéneo. Produce una sombra de contacto oscura inmediata en la base unida a una penumbra ambiental suave. La superposición de capas separadas por comas emula esta atenuación sin enturbiar el fondo.
| Modelo de iluminación | Capas | Valores CSS | Comportamiento óptico | Superficie recomendada |
|---|---|---|---|---|
| Sombra plana única (Single Muddy Drop) | 1 capa | 0 20px 25px rgba(0, 0, 0, 0.35) | Halo oscuro tosco y poco natural; carece de luz de rebote ambiental y atenuación progresiva por proximidad. | Botones retro heredados o énfasis gráficos tipo arte pop y cómic. |
| Elevación bicapa: contacto + penumbra | 2 capas | 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.16) | Atenuación física realista: línea de contacto oscura y definida en la base más una penumbra suave y difusa. | Elevación moderna en interfaces: tarjetas, cuadros de diálogo modales y paneles flotantes. |
| Oclusión profunda flotante (Floating Deep Occlusion) | 3 capas | 0 2px 4px rgba(0,0,0,0.06), 0 12px 28px -4px rgba(0,0,0,0.14), 0 24px 48px -12px rgba(0,0,0,0.12) | Simula gran elevación sobre el plano de fondo con disipación lumínica exponencial. | Menús desplegables, tooltips flotantes y paletas de comandos (Cmd+K). |
| Hendidura interior / Bajo relieve (Inset Well) | 1–2 capas (inset) | inset 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.20) | Recortada internamente por la caja de relleno (padding-box), proyectando una sombra interior desde el borde superior izquierdo. | Estados presionados/activos de botones, campos de búsqueda hundidos y pistas de interruptores (toggles). |
Modelos de coordenadas y vectores en degradados CSS
Los motores de renderizado de CSS interpretan cada tipo de degradado como un plano vectorial específico. Conocer sus sistemas de coordenadas permite evitar inconsistencias entre las herramientas de diseño y el navegador:
| Tipo de degradado | Vector geométrico | Origen cero (Punto 0) | Distribución de paradas | Reglas de renderizado del navegador |
|---|---|---|---|---|
| Degradado lineal (Linear Gradient) | Rayo direccional (Ángulo o lado/esquina) | 0deg = Hacia arriba (12 en punto); 90deg = Hacia la derecha (3 en punto) | Porcentaje o longitud a lo largo del rayo direccional | La norma W3C utiliza coordenadas polares en sentido horario. Nota: herramientas como Figma invierten el ángulo en 180°. |
| Degradado radial (Radial Gradient) | Origen focal proyectado hacia el exterior en anillos concéntricos | Posición de anclaje: center, top, bottom, left, right o pares de coordenadas | Distancia desde el centro hacia la forma envolvente final (círculo o elipse) | El círculo utiliza un único radio; la elipse escala los radios de forma independiente en los ejes de anchura y altura. |
| Degradado cónico (Conic Gradient) | Barrido rotacional alrededor de un punto de pivote central | from <ángulo> at <posición> (0deg = 12 en punto por defecto) | Barrido angular (de 0deg a 360deg o de 0% a 100%) | Genera ruedas cromáticas, gráficos circulares tipo tarta y bordes con barrido angular sin recurrir a SVG. |
Dinámica de ejes y matriz de alineación en Flexbox
A diferencia del flujo de bloques o cuadrícula estática, el modelo Flexbox calcula las posiciones basándose en dos vectores perpendiculares: el eje principal y el eje transversal.
| Propiedad | Ámbito | Mecánica de cálculo | Efecto en el diseño del contenedor |
|---|---|---|---|
| flex-direction | Contenedor | Define la orientación del eje principal. "row" orienta horizontalmente; "column" orienta verticalmente. | Intercambia los ejes principal y transversal en todos los cálculos de alineación y dimensionamiento de los hijos. |
| justify-content | Contenedor | Distribuye el espacio libre sobrante entre los elementos y a su alrededor a lo largo del EJE PRINCIPAL. | Controla el espaciado (flex-start, center, flex-end, space-between, space-around, space-evenly). |
| align-items | Contenedor | Alinea los elementos flexibles perpendicularmente al eje principal a lo largo del EJE TRANSVERSAL. | Controla el posicionamiento transversal (stretch, flex-start, center, flex-end, baseline). |
| gap (row / column) | Contenedor | Establece la separación neta entre elementos contiguos sin proyectar márgenes en el perímetro exterior. | Elimina selectores de compensación (:last-child) y márgenes negativos en contenedores envolventes. |
Ejemplos prácticos y arquitectura de Tokens de Diseño
Variables CSS nativas (Design Tokens)
Centralice las sombras y degradados en tokens semánticos reutilizables dentro de su hoja de estilos global:
/* Definiciones de tokens de diseño (tokens.css) */
:root {
--shadow-card-elevated: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px -4px rgba(0, 0, 0, 0.16);
--shadow-glow-accent: 0 0 24px rgba(99, 102, 241, 0.55);
--gradient-brand-wash: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--radius-leaf: 32px 4px 32px 4px;
}
.card-component {
box-shadow: var(--shadow-card-elevated);
border-radius: var(--radius-leaf);
}Integración en temas de Tailwind CSS
Incorpore elevaciones y degradados de forma nativa en la configuración del tema de Tailwind:
// Integración con tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
'card-layered': '0 1px 2px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.16)',
'glow-accent': '0 0 24px rgba(99, 102, 241, 0.55)',
},
borderRadius: {
'leaf': '32px 4px 32px 4px',
},
backgroundImage: {
'brand-wash': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
},
},
},
};Herramientas relacionadas
Frequently Asked Questions
¿Cómo crear sombras de caja multicapa suaves y realistas en CSS?
La iluminación física real produce una sombra de contacto oscura y definida en la base del objeto, acompañada de una penumbra ambiental más amplia y difusa. En CSS, apile dos o más capas de sombras separadas por comas: la primera capa aporta un desenfoque sutil de 1px–2px con baja opacidad para marcar el punto de contacto, mientras que la segunda aplica un desenfoque amplio de 12px–24px con radio de extensión negativo (por ejemplo, spread: -4px) para generar una elevación suave sin desbordamiento lateral.
¿Cómo funciona la palabra clave inset en CSS box-shadow?
Al incorporar la palabra clave inset, el cálculo de la sombra se invierte: en lugar de proyectarse hacia el exterior del borde, se dibuja dentro de la caja de relleno (padding-box) del elemento y queda delimitada por sus bordes interiores. Las sombras interiores son habituales para representar campos de texto hundidos, estados activos o presionados de botones, pistas de interruptores y relieves biselados.
¿Cuál es la diferencia fundamental entre degradados lineales, radiales y cónicos?
Los degradados lineales efectúan transiciones de color a lo largo de un rayo direccional recto definido por un ángulo (como 90deg o 135deg). Los degradados radiales se expanden hacia el exterior desde un origen focal central en ondas circulares o elípticas, perfectos para focos de luz y efectos de viñeteado. Los degradados cónicos barren las paradas de color alrededor de un punto de pivote central de 360 grados como las manecillas de un reloj, permitiendo diseñar ruedas cromáticas, gráficos circulares y bordes perimetrales sin SVG.
¿Cómo evitar zonas grisáceas o apagadas en el centro de un degradado CSS?
Los degradados CSS convencionales interpolan tradicionalmente los colores a través del espacio de color no lineal sRGB. Cuando dos tonos complementarios (como azul saturado y naranja) se mezclan en sRGB, el punto medio matemático experimenta una notable caída en cromaticidad y luminosidad percibidas, creando una banda grisácea apagada. Para solucionarlo, inserte paradas de color armónicas intermedias o ajuste los puntos medios en la declaración del degradado.
¿Cuál es el orden sintáctico de los cuatro valores de border-radius?
Al declarar cuatro valores (por ejemplo, border-radius: 32px 8px 32px 8px;), el navegador asigna las curvas en sentido horario empezando por la esquina superior izquierda: el primer valor corresponde a la superior izquierda, el segundo a la superior derecha, el tercero a la inferior derecha y el cuarto a la inferior izquierda. Desvincular estos valores permite crear siluetas asimétricas, esquinas diagonales, burbujas de diálogo y distintivos orgánicos.
¿Por qué es preferible usar border-radius: 9999px frente a 50% para botones tipo píldora?
Los valores porcentuales calculan el radio en proporción directa a las dimensiones del elemento: un 50% sobre un rectángulo no cuadrado (como un botón de 140px por 40px) genera una elipse con 70px de radio horizontal y 20px de vertical, produciendo una forma ovalada deformada. Un valor en píxeles deliberadamente alto como 9999px activa el algoritmo de restricción de radio de CSS, que limita automáticamente las curvas a la mitad exacta del lado más corto (20px), garantizando extremos perfectamente semicirculares.
¿En qué se diferencian justify-content y align-items en Flexbox?
La distinción depende estrictamente del eje principal configurado en el contenedor: justify-content distribuye el espacio sobrante y posiciona los elementos a lo largo del EJE PRINCIPAL (horizontal con flex-direction: row, vertical con flex-direction: column). Por el contrario, align-items determina la posición a lo largo del EJE TRANSVERSAL perpendicular (vertical en modo fila, horizontal en modo columna).
¿Por qué es más conveniente usar la propiedad CSS gap que márgenes en Flexbox?
La propiedad gap aplica espaciado estrictamente entre elementos flexibles adyacentes. A diferencia de margin-right o margin-bottom, nunca se desborda sobre el perímetro exterior del contenedor, evitando trucos con selectores :last-child o márgenes negativos compensatorios. Además, gestiona de forma nativa los saltos de línea asignando row-gap y column-gap de manera independiente.
¿Cómo evitar que los elementos flexibles se desborden cuando el texto es demasiado largo?
Por defecto, la especificación CSS Flexbox establece min-width: auto en los elementos secundarios flexibles, impidiendo que se encojan por debajo del tamaño intrínseco de su contenido. Cuando un elemento contiene una URL extensa, una palabra sin espacios o un bloque de código, forza el desbordamiento horizontal del contenedor. Declarar min-width: 0 en el elemento secundario anula este comportamiento y permite que flex-shrink o text-overflow: ellipsis funcionen correctamente.
¿Cómo integrar las sombras y degradados generados en Tailwind CSS?
Puede registrar las sombras multicapa o degradados en su archivo tailwind.config.js bajo theme.extend.boxShadow o theme.extend.backgroundImage, habilitando clases como class="shadow-card-layered". De forma alternativa, puede insertar la declaración completa directamente mediante la sintaxis de valores arbitrarios de Tailwind utilizando guiones bajos para representar los espacios: class="shadow-[0_1px_2px_rgba(0,0,0,0.08),0_8px_24px_-4px_rgba(0,0,0,0.16)]".