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

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.

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 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 línea, 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.

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

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

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

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

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

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

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

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

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

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

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 explorar un carrusel nativo controlado con CSS. Revisa en la guía su navegación, accesibilidad y fallback.

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