Estilos

Ajusta ángulo, colores y forma, mira la previa al momento y copia el CSS. Lineal, radial y cónico, con parada intermedia opcional.

Ajusta el radio de las cuatro esquinas, prévisualo al momento y copia el CSS. Con px, rem y porcentaje: en una caja no cuadrada el porcentaje da elipse.

Ajusta desenfoque, opacidad, saturación y borde, mira el vidrio esmerilado al momento y copia el CSS, con el prefijo -webkit- para iOS.

Ajusta distancia, desenfoque, intensidad y dirección, mira el neumorphism al momento y copia el CSS. Las dos sombras se derivan del fondo, mismo tono.

Ajusta el color y la intensidad, mira el texto de neón al momento y copia el CSS. Varias capas de text-shadow forman el halo, sobre fondo oscuro.

Elige propiedad, duración, aceleración y retardo, pruébalo pasando el cursor y copia el CSS. El código separa transition y :hover con claridad.

Siete animaciones listas (fundido, deslizar, rebote, latido, temblor, giro, flotar): ajusta duración y curva y copia el CSS con su prefers-reduced-motion.

Ajusta color e intensidad, mira el efecto glitch al momento y copia el CSS. Dos copias desalineadas con tiras recortadas, e instrucciones del data-text.

Ajusta desenfoque, contraste y tamaño, mira el efecto gooey al momento y copia el CSS. El desenfoque y un contraste alto tienden un puente entre formas.

Ajusta eje, duración y perspectiva, previsualiza el giro de una tarjeta 3D y copia el CSS, con sus tres propiedades clave señaladas.

Modela una curva de aceleración arrastrando dos puntos de control, mira cómo se mueve y copia cubic-bezier() con sus formas para transition y animation.

Pulsa botones para cambiar flex-direction, justify-content, align-items y más, mira el diseño al momento y copia el CSS completo con su HTML.

Ajusta dirección, tamaño, separación y altura para previsualizar el texto vertical y copiar el CSS. La altura decide dónde se parten las columnas.

Ajusta dirección, bandas de color y luminosidad para previsualizar un texto con degradado arcoíris y copiar el CSS recortado a su forma.

Pasa el ratón por el bloque para ver cada palabra clave de cursor. Hay más de treinta y la mitad no se adivina por el nombre.

Genera un bloque @media: breakpoints que encajan sin dejar un hueco de 0,02px, modo oscuro, menos movimiento, impresión y más. Con vista previa.

Genera scroll-snap-type y scroll-snap-align para un ajuste horizontal o vertical con tres alineaciones. Arrastra la vista previa y lo verás.

Ajusta desplazamiento, desenfoque, propagación, color y capas, previsualiza box-shadow en vivo, con sombra interior, 2 a 5 capas y cinco preajustes.

Nueve controles para desenfoque, brillo, contraste, saturación, escala de grises y más, entre filter y backdrop-filter, con cinco preajustes.

Recorta un degradado en tu texto: lineal, radial o cónico, de 2 a 4 paradas, con vista previa en vivo, prefijo, respaldo y arreglo de selección.

Sólido, discontinuo, punteado, doble, ranura y relieve 3D y patrones de ondas, con radios por esquina, bordes de un solo lado y border-image.

Escribe una expresión calc() y comprueba su sintaxis al momento. La falta de espacios en + y −, las unidades incompatibles y más se señalan enseguida.

Convierte clases Tailwind como bg-blue-500 a y desde hex, rgb() y hsl(), y halla el más cercano de 22 familias con su distancia.

Genera el CSS de un fondo transparente: una cuadrícula o rayas a 45°, con colores, tamaño de celda y dos implementaciones de cada patrón.

Ajusta masa, rigidez y amortiguación para obtener el spring de Framer Motion, un linear() de CSS de 60 puntos y el veredicto de sobrepaso.