Herramientas

Pequeñas, sin registro y sin anuncios. Cambias los valores, ves el resultado y copias el CSS.

• clamp()Tipografía fluidaDale el tamaño mínimo, el máximo y entre qué anchos crece: te devuelve el clamp() hecho.
• --space-*Escala de espaciosUna escala de márgenes y separaciones como custom properties, para dejar de inventarse números.
• box-shadowSombras en capasVarias sombras suaves apiladas, que es como se ven las de verdad. Ajusta y copia.
• oklch()Color → paletaDe un color a una escala del 50 al 950 en OKLCH, con la luz repartida a ojo humano y no a ojo de máquina.
• WCAGContrasteDos colores y sabrás al momento si el texto se lee: ratio WCAG y si pasa AA o AAA.
• cubic-bezier()Curvas de easingArrastra los dos puntos de la curva y mira cómo se mueve antes de copiarla. Con las de siempre a mano.
• (0,1,0)EspecificidadPega selectores y mira cuál gana y por qué, con :is(), :not(), :has() y :where() contados como toca.

¿Te falta alguna? En los enlaces hay más de 200, de gente que las hace mejor que yo. Ver los enlaces →