Design en CSS

Zet een codefragment in je browser om in een afbeelding met syntaxisaccentuering, met 20+ talen, aangepaste thema's en achtergronden, regelnummers en PNG- of SVG-export.

Controleer WCAG 2.1-contrast en APCA Lc-score tussen tekst en achtergrond, bekijk AA-, AAA- en 3:1-badges en pas de dichtstbijzijnde geslaagde kleur toe.

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 OKLCH-, HSL- of RGB-schaal met instelbare stappen, WCAG-contrasttips per stap en export naar CSS, Tailwind en JSON.

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 een CSS-cubic-bezier- of steps()-easing door de grepen te slepen, bekijk hem met een live-animatie en kopieer de kant-en-klare waarde.

Bouw CSS Flexbox of Grid visueel met container- en per-item-instellingen, aangepaste trackgrootte en een grid-template-areas-editor, en kopieer de 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.