Generador de CSS
- Los archivos no salen de tu dispositivo
- Se ejecuta en el navegador
- Gratis, sin registro ni marca de agua
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Cómo usar Generador de CSS
Genera CSS de forma visual, con vista previa en vivo: box shadow, clip path, suavizado cubic bezier, glassmorphism, radio de borde blob y sombra de texto. Cada generador da CSS simple y una clase de valor arbitrario de Tailwind, listos para copiar.
- 1
Elige un generador: Box shadow, Clip path, Cubic bezier, Glassmorphism, Radio blob o Sombra de texto.
- 2
Empieza con un preajuste, o ajusta los controles y los colores.
- 3
Arrastra directo sobre la vista previa donde se ofrezca: puntos de clip-path, los dos controles bezier o los controles del blob.
- 4
Copia el CSS o la clase de Tailwind de la salida de abajo.
Preguntas frecuentes
¿Puedo apilar varias sombras?
Sí. En Box shadow, haz clic en Añadir capa para combinar capas, cada una con su propio desplazamiento, desenfoque, expansión, color, opacidad e inset.
¿Cómo añado o quito puntos de un clip path?
Haz doble clic en el borde de la forma para añadir un punto; selecciona un punto y pulsa Supr para quitarlo. Las formas Círculo, Elipse e Inset usan controles en su lugar.
¿Por qué no veo el efecto de cristal?
backdrop-filter solo desenfoca lo que hay detrás del elemento, así que necesita un fondo colorido o cargado. La salida incluye el prefijo -webkit- para Safari.
¿Qué hacen los valores bezier fuera de 0–1?
Los valores Y por encima de 1 o por debajo de 0 hacen que el movimiento se pase, lo que da un efecto de rebote o de anticipación. Pulsa Reproducir para compararlo con el movimiento lineal.
¿La salida de Tailwind necesita un plugin?
No. Usa la sintaxis de valor arbitrario de Tailwind, como rounded-[…] o [clip-path:…], que funciona en Tailwind estándar.