Catci CSS Playground
Try your HTML with
Catci
custom attributes. Compile, edit class names, and preview instantly.
Input HTML (with Catci attributes)
<div font="fs:1.2rem;fwght:700;c:#2d7ff9" bg="bgc:#eaf3ff" spacing="p:1.2rem;mb:1.5rem"> <h2 font="fs:1.3rem;fwght:600">Welcome to <span c="#2d7ff9">Catci</span>!</h2> <p font="fs:1.05rem;lh:1.7" spacing="mb:0.7rem"> Try editing this HTML, then click <b>Compile</b>.<br> Use <code>[font]</code>, <code>[bg]</code>, <code>[spacing]</code>, <code>[cx]</code>, etc. </p> <button cx="b;bgc:#2d7ff9;c:#fff;px:1.2rem;py:0.7rem;bd:none;fs:1.05rem;cur:pointer;op:0.95;hover{op:1}" spacing="mr:0.7rem"> Primary Button </button> <button cx="b;bgc:#fff;c:#2d7ff9;px:1.2rem;py:0.7rem;bd:1.5px solid #2d7ff9;fs:1.05rem;cur:pointer;op:0.95;hover{op:1}"> Secondary </button> </div>
Compile
Compiled HTML
Generated CSS
Download HTML
Download CSS
Live Preview