Playgrounds de CSS moderno

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 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.

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

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

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

Explora color-mix() ajustando el espacio de color, dos 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.

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.

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.

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

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

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

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-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.

Explora text-decoration con controles para combinar underline, overline, line-through, estilos de trazo, color y grosor 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-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 linea, equilibrio de titulares y ajustes pensados para lectura.

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 :active con enlaces y botones. Cambia estilos sencillos que se aplican mientras el usuario mantiene pulsado el elemento y copia el CSS generado.

Explora :any-link con enlaces que tienen href. Cambia estilos sencillos, compara enlaces reales frente a placeholders sin href y copia el CSS generado.

Explora :hover con enlaces y botones. Cambia estilos sencillos que se aplican al pasar el puntero sobre el elemento y copia el CSS generado.

Explora :link con enlaces no visitados. Cambia estilos sencillos, compara enlaces con href frente a placeholders sin href y copia el CSS generado.

Explora :visited con enlaces dependientes del historial. Ajusta solo propiedades de color permitidas por privacidad y revisa el CSS generado.

Explora :empty con ejemplos visuales para detectar elementos sin nodos hijos, aplicar placeholders CSS, resaltar huecos o esconder bloques vacíos.

Explora :open con details, dialog, select e inputs con picker. Cambia el color de fondo y alterna si el estilo se aplica solo cuando el elemento está abierto.

Explora :popover-open con un popover nativo. Activa o desactiva un bloque de posicionamiento que solo se aplica mientras el popover está visible.

Explora :playing con elementos <audio> y <video>. Cambia el estilo que se aplica mientras el medio se reproduce y copia el CSS generado.

Explora :paused con elementos <audio> y <video>. Cambia el estilo que se aplica cuando el medio está pausado y copia el CSS generado.

Explora :seeking con elementos <audio> y <video>. Ajusta el estilo que se aplica mientras el navegador busca una nueva posición del medio.

Explora :buffering con elementos <audio> y <video>. Cambia el estilo que se aplica cuando el navegador necesita más datos antes de continuar.

Explora :stalled con elementos <audio> y <video>. Ajusta estilos para el caso en que el navegador intenta obtener datos pero la carga se detiene.

Explora :muted con elementos <audio> y <video>. Personaliza el estilo que se aplica cuando el medio está silenciado.

Explora :volume-locked con elementos <audio> y <video>. Define estilos para cuando el navegador o la plataforma bloquean el control de volumen.

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 el pseudoelemento CSS ::details-content con un details nativo, personaliza el contenido desplegable y copia el HTML y CSS generado.

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

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

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 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 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.

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.

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 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.

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

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

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

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.

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.

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.

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 padding con controles interactivos por todos los lados, por lado o por eje, cambia unidades y compara propiedades físicas y lógicas.

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 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.

Combina scroll snap con ::scroll-button(), ::scroll-marker y ::scroll-marker-group para crear un slider nativo, accesible y controlado solo con CSS.

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