Potentes generadores CSS para sombras de caja, diseños flexbox, diseños de cuadrícula y conversiones de unidades. Obtenga código CSS y Tailwind al instante. Todo el procesamiento ocurre localmente en su navegador.
box-shadow: 4px 4px 8px 0px #00000040;Tool Notes is a Supporter feature.
Elija entre las pestañas Box Shadow, Flexbox o Unit Converter.
Use controles deslizantes y entradas para configurar las propiedades CSS. Vea una vista previa en vivo del resultado.
Copie el código CSS o Tailwind generado en su portapapeles.
Pruebe configuraciones predefinidas para patrones comunes y personalícelas según sus necesidades.
El generador de box shadow crea propiedades CSS box-shadow con desplazamiento horizontal/vertical, radio de desenfoque, expansión y color personalizables. Se pueden apilar múltiples capas para efectos complejos como tarjetas elevadas o diseños neumórficos. Cada capa admite colores RGBA con transparencia alfa y sombras inset para efectos internos. La herramienta genera tanto CSS estándar como valores arbitrarios de Tailwind.
Configure las propiedades del contenedor flex (flex-direction, justify-content, align-items, flex-wrap, gap) y vea las clases CSS y Tailwind equivalentes en tiempo real. El constructor visual muestra cómo se organizarán los elementos con su configuración. Compatible con todas las propiedades modernas de flexbox, incluidas dirección de fila/columna, alineación center/space-between y espaciado gap.
Convierta entre unidades absolutas (px, pt) y unidades relativas (rem, em, vw, vh). Utiliza el tamaño de fuente base especificado (predeterminado 16px) para cálculos precisos de rem/em. La conversión sigue los estándares W3C: 1rem = tamaño de fuente base, 1em = tamaño de fuente del elemento padre, 1vw = 1% del ancho del viewport. Útil para diseño responsivo y tamaños accesibles.
Toda la generación de CSS ocurre completamente en su navegador usando JavaScript. Obtiene tanto CSS vanilla como salida de Tailwind CSS donde corresponda. El código generado está listo para producción y se puede copiar directamente en sus hojas de estilo. No hay comunicación con el servidor: la herramienta funciona completamente sin conexión una vez cargada.
Esta herramienta genera box shadows (capa única o múltiples), layouts flexbox (propiedades de contenedor y elemento) y convierte entre unidades CSS (px, rem, em, %).