Cambia flex-direction, flex-wrap, justify-content, align-items, align-content y gap sobre cajas numeradas y mira cómo se reorganizan. Toca una caja para darle su propio flex-grow, flex-basis, order o align-self, por ejemplo que la caja 2 ocupe el espacio sobrante con flex: 1. Copia el CSS del contenedor y de los elementos.
Cómo se usa
- Elige un generador en la fila superior: degradado, sombra, bordes redondeados, cristal, sombra de texto, clip-path, easing, flexbox o grid.
- Mueve los controles o arrastra directamente en la vista previa: paradas en la barra del degradado, puntos del clip-path, controles de la curva bezier, los cuatro controles del border-radius.
- Si quieres, parte de un ajuste predefinido bajo el código.
- Toca el código para copiarlo. Se recuerdan tus últimos ajustes de cada generador.
- Haz clic en un hueco de la barra del degradado para añadir una parada con el color de ese punto.
- En el modo de 8 valores de border-radius, los cuatro controles mueven pares de valores, como en las herramientas «fancy border radius».
- backdrop-filter necesita el prefijo -webkit- en Safari; el código de cristal incluye ambos.
- Flexbox y grid: toca una caja numerada en la vista previa para darle su propio grow, order o span.
Por qué generar CSS de forma visual
Propiedades como box-shadow, clip-path o cubic-bezier llevan varios números cuyo efecto cuesta imaginar. Un box-shadow de 0 10px 30px -5px rgba(0, 0, 0, 0.25) se lee como desplazamiento x, desplazamiento y, desenfoque, extensión y color; un cubic-bezier(0.34, 1.56, 0.64, 1) se pasa de largo porque su segundo valor y supera 1. Arrastrar la forma y ver el resultado es más rápido que cambiar números y recargar.
El resultado es CSS puro que funciona en todos los navegadores actuales sin frameworks, así que puede ir directo a una hoja de estilos, un objeto CSS-in-JS o un archivo de tokens de diseño.
Valores de referencia útiles
Los ángulos de los degradados empiezan arriba y giran en el sentido de las agujas del reloj: 0deg apunta arriba, 90deg a la derecha y 180deg abajo. Las palabras clave de easing equivalen a ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) y ease-in-out = (0.42, 0, 0.58, 1); los valores x deben estar entre 0 y 1. border-radius admite hasta ocho valores, radios horizontales y verticales separados por una barra, y así se crean formas orgánicas como 30% 70% 70% 30% / 30% 30% 70% 70%.
Consejos para un buen resultado
Las sombras realistas salen de varias capas suaves y no de una sola oscura, y las sombras teñidas con el tono del fondo quedan menos sucias que el negro puro. Mantén legible el efecto cristal comprobando el contraste del texto sobre la zona más cargada del fondo. Para maquetar, flexbox va bien con filas o columnas en una dimensión y grid con filas y columnas a la vez; toca una caja de la vista previa para darle su propio grow, order o span.
Preguntas frecuentes
¿Estos efectos CSS funcionan en todos los navegadores?
Degradados, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, flexbox y grid funcionan en todos los navegadores actuales. backdrop-filter, usado en el efecto cristal, necesita el prefijo -webkit- en versiones antiguas de Safari, así que el código incluye ambos.
¿Cómo hago una sombra suave y realista?
Apila dos o tres capas con desenfoque y desplazamiento crecientes y poca opacidad, por ejemplo 0 1px 2px al 8 %, 0 4px 8px al 8 % y 0 16px 32px al 8 %. Los ajustes por capas son un buen punto de partida.
¿Qué diferencia hay entre degradado lineal, radial y cónico?
El lineal cambia de color a lo largo de una recta, el radial se expande desde un centro en círculo o elipse y el cónico gira los colores alrededor de un centro como una aguja de reloj, útil para gráficos circulares y ruedas de color.
¿Cómo creo una forma orgánica con border-radius?
Usa la sintaxis de ocho valores con barra, como 30% 70% 70% 30% / 30% 30% 70% 70%. Arrastra los cuatro tiradores de la vista previa para darle forma y copia el resultado.
¿Se pueden animar las formas de clip-path?
Sí, entre polígonos con el mismo número de puntos. Mantén igual el número de puntos, añade una transición sobre clip-path y cambia el polígono al pasar el ratón o con una clase.
¿Puedo usar libremente el código generado?
Sí. Es CSS corriente creado a partir de tus ajustes, sin licencia ni atribución obligatoria.