Generador de efectos CSS

Border-radius, cristal, neumorfismo, sombra de texto, filtros y clip-path en CSS.

Presets
Top left
Top right
Bottom right
Bottom left
Preview

Qué hace

Seis efectos CSS con vista previa dibujada por tu navegador y el código listo para copiar. Border radius con sus ocho valores (radio horizontal y vertical de cada esquina) para manchas, hojas y huevos, escrito en la forma más corta. Cristal con fondo translúcido, backdrop-filter con desenfoque y saturación, borde claro, prefijo -webkit- y una alternativa para navegadores sin soporte. Neumorfismo con superficies suaves a partir de un color base. Sombra de texto en varias capas. Filtros (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) sobre una imagen de ejemplo o la tuya, que nunca se sube. Clip-path con polígonos regulares, estrellas, flechas y bocadillos.

Legibilidad

Sobre el cristal, el texto se lee contra el fondo desenfocado mezclado con el tinte; la herramienta estima ese color y muestra el peor contraste. WCAG AA pide 4,5:1 para texto normal. En neumorfismo el borde oscuro suele quedar cerca de 1,4:1 frente al fondo, por debajo del 3:1 que pide WCAG 1.4.11 para controles, así que añade un borde, un icono o una etiqueta. Safari anterior a la versión 18 necesita -webkit-backdrop-filter, incluido en el código.

Preguntas frecuentes

¿Por qué no se ve el desenfoque?

backdrop-filter desenfoca lo que hay detrás; el fondo del elemento debe ser parcialmente transparente.

¿El neumorfismo es accesible?

No por sí solo: el contraste de los bordes suele estar por debajo de 3:1.

¿Importa el orden de los filtros?

Sí, cada función se aplica sobre el resultado de la anterior.