Tus labs favoritos

Explora accent-color con un selector de color para personalizar controles nativos como checkbox, radio, range y progress sin JavaScript.

Modifica solo la opacidad de un color con alpha(). Fija un nuevo alfa o multiplica el original con calc(alpha * …), conservando sus componentes y espacio de color.

Explora ::backdrop con un dialog modal nativo. Cambia solo el color de fondo del backdrop y copia el HTML con command/commandfor y el CSS generado.

Explora backdrop-filter con una imagen de fondo y un panel central semitransparente. Ajusta funciones de filtro encadenadas y copia el HTML y CSS generado.

Explora background-color con un selector de color simple para visualizar el resultado al instante y copiar el CSS listo para usar.

Explora background-image con una URL editable y controles para position, size, repeat y attachment para visualizar el resultado al instante y copiar el CSS listo para usar.

Construye selectores básicos y de atributo, compáralos sobre tres escenarios HTML y examina cada coincidencia y su especificidad.

Explora border con controles interactivos para ancho, estilo y color por lados o ejes, compara propiedades físicas y lógicas y copia el CSS al instante.

Ajusta border-radius por esquina o pares de esquinas, cambia unidades y propiedades físicas o lógicas y genera el CSS listo para usar.

Dibuja bordes no rectangulares con formas básicas y shape(), compara los modos de trazo y relleno y observa cómo el borde sigue la geometría.

Combina hasta tres sombras de caja con offset, blur, spread, color e inset, y genera el código listo para usar.

Combina scroll snap con ::scroll-button(), ::scroll-marker y ::scroll-marker-group para explorar un carrusel nativo con CSS. Compara los modos links y tabs, su navegación, accesibilidad y fallback en la guía.

Explora color-mix() ajustando el espacio de color, dos o más colores y sus porcentajes. En espacios polares como hsl, hwb, lch y oklch también puedes cambiar la interpolación del hue y ver en el código el color resuelto por el navegador.

Distribuye contenido editorial en columnas: combina anchura y cantidad, ajusta la separación y las reglas y controla spans y cortes antes de copiar el código.

Compara relaciones de profundidad y hermandad sobre tres escenarios HTML y comprueba exactamente qué elementos selecciona cada combinador.

Explora contrast-color() con un selector de color de fondo. El ejemplo aplica el color elegido a un botón y deja que CSS resuelva automáticamente si el texto debe ser blanco o negro, con una salida de código inspirada en MDN.

Experimenta con corner-shape y border-radius para crear esquinas redondeadas, biseladas, recortadas o cóncavas por esquina o por pares.

Explora qué selecciona una regla dentro del shadow root y qué puede estilizar la página desde fuera.

Explora los nuevos select personalizables con contenido enriquecido en las opciones, estilos para el picker, el icono y el checkmark, y un fallback opcional para navegadores sin soporte.

Explora datalist como una lista de valores sugeridos para un input. Cambia el tipo de control, configura atributos y compara menús, marcas de rango y selectores nativos sin restringir el valor a las opciones disponibles.

Explora details con controles para editar cada summary y contenido, añadir nuevos bloques y probar el atributo name para crear acordeones exclusivos sin JavaScript.

Explora el pseudoelemento CSS ::details-content con un details nativo, personaliza el contenido desplegable y copia el HTML y CSS generado.

Explora dialog con una previsualización mínima formada solo por el botón de apertura y el modal. Cambia command, commandfor y closedby sin generar CSS.

Compara enlaces, puntero, teclado, foco descendiente, fragmentos y contexto de consulta con estados reales del navegador.

Distingue un atributo HTML, el estado semántico abierto y la visibilidad específica de un popover mediante interacciones reales.

Compara disponibilidad, edición, elecciones, obligatoriedad, validez y rangos mediante estados reales de controles nativos.

Observa siete estados reales de audio y vídeo, ajusta su presentación y distingue reproducción, carga y sonido.

Selecciona raíces, elementos vacíos y posiciones entre hermanos; compara An+B, el conteo inverso y los filtros of.

Explora field-sizing con controles para alternar entre content y fixed, compara el tamaño de campos de formulario compatibles y copia el CSS listo para usar.

Explora filter activando varias funciones a la vez, ajusta sus valores y prueba el resultado sobre una imagen o un fondo de color antes de copiar el CSS generado.

Construye layouts flexibles con controles visuales para el contenedor y las propiedades individuales de cada ítem, y copia el HTML, CSS o Tailwind resultante.

Explora font-size con controles para comparar keywords del navegador, valores relativos y longitudes sobre un bloque de texto real.

Explora font-size-adjust con controles para conservar el tamaño percibido del texto al cambiar de fuente y métrica.

Explora font-smooth con presets para comparar suavizado tipográfico y copiar CSS con los prefijos usados por navegadores compatibles.

Explora font-stretch con controles para probar anchuras tipográficas, keywords y porcentajes sobre texto real.

Explora font-style con controles para comparar cursiva real, oblicua sintetizada y ángulos de inclinación sobre un bloque de texto real.

Explora font-variant con controles para caps, ligaduras, variantes numéricas, formas east-asian y posición sobre un bloque de texto real.

Explora font-weight con controles para comparar keywords absolutas, keywords relativas y pesos numéricos sobre un bloque de texto real.

Construye funciones CSS personalizadas, añade o elimina parámetros con tipos y valores por defecto, combina varios result con @media y copia un ejemplo completo listo para probar.

Explora gap decorations con una grid de varias filas y columnas. Ajusta row-rule, column-rule, insets, cortes, visibilidad y overlap para generar CSS moderno.

Explora <geolocation> como control declarativo de ubicación gestionado por el navegador, ajusta sus atributos y copia el HTML con fallback. Conviene usar esta opción declarativa porque el navegador controla una interfaz de permiso contextual y fiable, reduce JavaScript imperativo y refleja mejor la intención explícita del usuario.

Diseña cuadrículas bidimensionales completas: define filas y columnas, crea áreas, expande celdas, controla la colocación de cada ítem y copia el resultado.

Crea layouts tipo masonry con CSS nativo: cambia entre waterfall y brick, combina patrones de lanes, controla la tolerancia del flujo y prueba una mejora progresiva en navegadores sin soporte.

Elige valores de padding con condiciones style(), media() o supports(). Ajusta las ramas, observa el CSS nativo y comparte tu configuración. Incluye una guía con ejemplos y fallbacks.

Explora los 22 tipos de input, sus atributos y la validación nativa. Compara valores, estados y datos del formulario sin enviar nada a un servidor.

Explora <install> como botón declarativo de instalación renderizado por el navegador, con una opción para la app actual y otra para una app externa como MDN. Conviene usar esta opción declarativa porque el navegador renderiza un botón de instalación de confianza, evita la ceremonia de beforeinstallprompt y mantiene una señal clara de intención del usuario.

Explora letter-spacing con controles para separar o acercar caracteres sobre un bloque de texto real y comprobar cómo cambia la lectura.

Elige un fondo y una imagen para cada esquema de color. CSS selecciona el primer argumento en claro y el segundo en oscuro. Las variantes de colores e imágenes tienen soporte independiente.

Explora line-height con controles para comparar normal, valores unitless, longitudes en rem y porcentajes sobre un bloque de texto real.

Combina condiciones con OR, AND y pseudoclases funcionales; compara sus coincidencias y observa cómo cambia la especificidad.

Explora margin con controles interactivos por todos los lados, por lado o por eje, cambia unidades, compara propiedades físicas y lógicas y usa auto para desplazar o centrar el bloque.

Explora meter con controles para el valor actual, el rango total y los umbrales low, high y optimum de una medida escalar conocida.

Explora mix-blend-mode con fondos de alto contraste y un elemento editable para ver cómo se mezcla con el contenido que tiene detrás.

Explora outline con controles para ancho, estilo, color y desplazamiento, cambia entre px y rem y genera el CSS con shorthand o propiedades separadas.

Explora padding con controles interactivos por todos los lados, por lado o por eje, cambia unidades y compara propiedades físicas y lógicas.

Crea contenido no modal en la capa superior con el atributo popover. Compara controles declarativos y JavaScript, prueba el cierre ligero y copia HTML, CSS y JS reutilizable.

Explora progress con controles para el valor actual, el máximo de la tarea y el estado indeterminado que se obtiene al omitir el atributo value.

Explora scrollbar-color, scrollbar-width y scrollbar-gutter con una previsualización que fuerza scroll vertical y genera el CSS listo para copiar.

Explora cómo scroll-margin amplía el área usada para llevar un elemento a la vista sin ocupar espacio en el layout. Aplica un valor común o ajusta cada lado por separado.

Explora cómo scroll-padding desplaza hacia dentro la región óptima de un contenedor de scroll sin alterar su layout. Aplica un valor común o ajusta cada lado por separado.

Explora cómo encaja un área de scroll en posiciones predecibles. Cambia el eje, la intensidad, la alineación de bloque e inline y los espacios del snapport y de cada destino.

Explora ::search-text con controles para las coincidencias de buscar en la página y usa :current para diferenciar el resultado activo.

Explora select con controles para editar su label, ordenar opciones, crear optgroups, añadir separadores hr y probar multiple y size sin JavaScript.

Explora ::selection con controles para cambiar el color, el fondo, la decoración y la sombra del texto seleccionado por el usuario.

Explora cómo idioma, dirección, definición y encabezados afectan a las coincidencias reales de los selectores.

Construye datos tabulares con table, caption, th, scope, thead, tbody, tfoot, colgroup, colspan y rowspan mientras ves y copias el resultado.

Explora text-align con controles para dirección de texto y alineación lógica o física. Al usar justify también puedes probar text-justify y copiar el CSS generado.

Explora text-align-last con controles para dirección de texto y alineación de la última línea o la línea previa a un salto forzado.

Explora text-box con controles para recortar el espacio vertical de las fuentes y elegir los bordes métricos usados por el contenido de un botón.

Explora text-decoration y text-decoration-inset: combina líneas, estilos, color y grosor, y ajusta los extremos del trazo sobre texto real.

Explora text-fit con los valores none, grow y shrink, los modos consistent, per-line y per-line-all y un porcentaje opcional para limitar el factor de escala.

Explora text-indent con controles para sangrar la primera línea de un bloque, cambiar la dirección del texto y probar los keywords hanging y each-line.

Combina hasta tres sombras de texto, ajusta sus desplazamientos, desenfoque y color, y genera código listo para copiar.

Explora text-transform con un selector para cambiar la capitalización visual del texto sin modificar el contenido HTML.

Explora text-wrap con un selector para comparar estrategias de salto de línea, equilibrio de titulares y ajustes pensados para lectura.

Compón transformaciones 2D y 3D, compara cómo cambia el resultado según el orden de las funciones y mueve el origen antes de copiar el código generado.

Combina los tres tipos de listas de HTML, crea niveles anidados y genera marcado semántico con ul, ol, li, dl, dt y dd.

Explora <usermedia> como control de confianza gestionado por el navegador para solicitar cámara y micrófono. Configura setConstraints(), conecta el MediaStream a una previsualización y compara el elemento nativo con un fallback progresivo basado en getUserMedia().

Explora word-spacing con controles para separar o acercar palabras sobre un bloque de texto real y comprobar cómo cambia la lectura.