Generador de Caja CSS
Usa controles deslizantes y selectores de color para diseñar visualmente el estilo de una caja CSS. Controla el border-radius, box-shadow (desplazamiento, desenfoque, dispersión, opacidad, color), el ancho y color del borde y el color de fondo. La vista previa en vivo se actualiza al instante y la salida CSS está lista para pegar directamente en tu hoja de estilos.
Cómo Generar Estilos de Caja CSS
- 1Elige un color de fondo con el selector de color
- 2Ajusta el border-radius con el control deslizante para esquinas redondeadas
- 3Establece el grosor del borde y, opcionalmente, elige un color de borde
- 4Ajusta los controles de box-shadow y copia el CSS generado
Ventajas
- Retroalimentación visual inmediata al ajustar cada propiedad
- El control de opacidad de sombra produce sombras más naturales que valores fijos
- Salida CSS lista para copiar — no es necesario escribirla manualmente
- Ayuda a entender cómo cada propiedad CSS afecta el resultado visual
Preguntas Frecuentes
¿Qué propiedades CSS genera este generador?
Genera background, border-radius, border (cuando el ancho es mayor que cero) y box-shadow. La sombra se expresa como una capa única de box-shadow con desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de dispersión y un color rgba derivado del selector de color de sombra y el control de opacidad. Esto cubre las necesidades de estilo de caja más habituales.
¿Cómo funciona el control de opacidad de sombra?
El selector de color de sombra produce un color hexadecimal opaco. El control de opacidad lo convierte en un valor rgba aplicando un canal alfa entre 0 y 1. Por ejemplo, negro al 20 por ciento de opacidad se convierte en rgba(0, 0, 0, 0.20). Usar un control de opacidad separado te da más precisión que intentar elegir un color semitransparente directamente desde un selector de color.
¿Puedo crear una sombra de tarjeta suave como las que usan las bibliotecas de UI modernas?
Sí. Una sombra de tarjeta suave típica tiene un pequeño desplazamiento vertical (4-8px), un radio de desenfoque generoso (16-24px), dispersión cero y una sombra negra al 10-15 por ciento de opacidad. Parte de esos valores y ajusta hasta que la sombra coincida con tu diseño. La caja de vista previa te ayuda a ver el efecto en contexto antes de copiar el CSS.
¿En qué se diferencia border-radius de hacer un círculo completo?
Establecer border-radius al 50% hace que un elemento cuadrado sea perfectamente circular. El control deslizante de esta herramienta va de 0px a 100px — para un círculo perfecto, el radio debe ser al menos la mitad de la dimensión más corta del elemento. Dado que la caja de vista previa tiene dimensiones fijas, un valor de alrededor de 64px o más se aproxima a una forma completamente circular o de pastilla. En tu código real, usar 50% es la forma más fiable de hacer circular cualquier elemento cuadrado.
¿Puedo añadir varias sombras de caja?
Este generador crea una sola capa de box-shadow, que cubre la mayoría de los casos de uso. Para varias sombras (efectos en capas, resplandor interior combinado con sombra exterior), tendrías que escribir CSS manualmente — separa las definiciones de sombra con comas en la propiedad box-shadow. Copia la sombra única de esta herramienta y añade capas adicionales a mano en tu editor.
¿Genera sombras interiores (inset)?
El generador actual produce únicamente sombras de caja exteriores. Una sombra interior requiere la palabra clave 'inset' en el valor de box-shadow (por ejemplo: inset 0px 2px 4px rgba(0,0,0,0.1)). Si necesitas una sombra interior, copia la salida de sombra generada y añade manualmente la palabra clave 'inset' antes de los valores de desplazamiento.