Design en CSS

Zet een codefragment in je browser om in een verzorgde PNG-kaart met syntaxisaccentuering, met een thema, verloop- of transparante achtergrond en opvulling — zonder uploaden.

Controleer de WCAG-contrastverhouding tussen een voorgrond- en achtergrond-HEX-kleur en zie of deze AA en AAA haalt voor zowel normale als grote tekst.

Meng twee HEX-kleuren in een gekozen verhouding in de RGB- of Lab-kleurruimte en lees de resulterende tussenkleur terug als staal en kopieerbare HEX-waarde.

Zet één HEX-basiskleur om in een Tailwind-achtige tintenschaal van 50-950, gemengd naar wit en zwart, met per stap een staal en een kopieerbare HEX.

Upload een afbeelding en bekijk een voorbeeld van hoe deze eruitziet bij protanopie, deuteranopie, tritanopie of volledige kleurenblindheid, en download daarna het gesimuleerde resultaat.

Pas alle acht border-radius-hoekwaarden aan, inclusief elliptische horizontale en verticale radii, bekijk een live voorbeeld van de box en kopieer de verkorte CSS.

Bouw een CSS-box-shadow met meerdere lagen met regelaars voor offset, vervaging, spread, kleur en inset, bekijk een live voorbeeld en kopieer de kant-en-klare eigenschap.

Zet een minimale en maximale lettergrootte plus een minimale en maximale viewportbreedte om in één breakpoint-vrije CSS-clamp()-expressie voor vloeiende typografie.

Bouw een CSS-clip-path uit presets voor cirkel, ellips, polygoon, inset of afgeronde inset met getalvelden, bekijk hem live in de voorvertoning en kopieer de kant-en-klare eigenschap.

Bewerk de vier controlepunten van een CSS-cubic-bezier-easingcurve, sleep de grepen of typ de waarden, bekijk de curve en kopieer de cubic-bezier()-functie.

Pas de containereigenschappen voor CSS Flexbox of Grid aan, bekijk de visuele lay-out live bijwerken en kopieer de gegenereerde CSS.

Genereer matglas-CSS met regelaars voor vervaging, transparantie, verzadiging, rand en schaduw plus een tintkleur, bekijk het in een voorbeeld over een achtergrond en kopieer de backdrop-filter-CSS.