Design e CSS
Genera gradienti, ombre e scale di colore CSS e verifica il contrasto — codice pronto da copiare.
Codice in immagine
Trasforma uno snippet di codice in un'immagine con evidenziazione della sintassi nel tuo browser, con oltre 20 linguaggi, temi e sfondi personalizzati, numeri di riga ed esportazione PNG o SVG.
Verificatore di contrasto dei colori
Controlla il contrasto WCAG 2.1 e il punteggio APCA Lc tra testo e sfondo, vedi i badge AA, AAA e 3:1 e applica il colore conforme più vicino.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala OKLCH, HSL o RGB con livelli regolabili, suggerimenti di contrasto WCAG per livello ed esportazione in CSS, Tailwind e JSON.
Simulatore di daltonismo
Carica un'immagine e visualizza l'anteprima di come appare con protanopia, deuteranopia, tritanopia o daltonismo totale, poi scarica il risultato simulato.
Generatore di border-radius CSS
Regola tutti gli otto valori d'angolo di border-radius, inclusi i raggi orizzontale e verticale ellittici, guarda un'anteprima live del riquadro e copia il CSS abbreviato.
Generatore di box-shadow CSS
Crea ombre CSS box-shadow su più livelli con controlli di offset, sfocatura, espansione, colore e inset, guarda un'anteprima dal vivo e copia la proprietà pronta all'uso.
Generatore di clamp() CSS
Trasforma una dimensione del carattere minima e massima insieme a una larghezza del viewport minima e massima in un'unica espressione clamp() CSS di tipografia fluida senza breakpoint.
Generatore di clip-path CSS
Crea un clip-path CSS a partire da preset cerchio, ellisse, poligono, inset o inset arrotondato con campi numerici, visualizzalo in tempo reale e copia la proprietà pronta all'uso.
Generatore di cubic-bezier CSS
Modifica un easing CSS cubic-bezier o steps() trascinando le maniglie, visualizzalo in anteprima con animazione dal vivo e copia il valore.
Playground CSS Flexbox e Grid
Costruisci CSS Flexbox o Grid in modo visivo con controlli del contenitore e per elemento, dimensionamento tracce personalizzato ed editor grid-template-areas, poi copia il CSS.
Generatore di glassmorphism CSS
Genera CSS in vetro smerigliato con controlli per sfocatura, trasparenza, saturazione, bordo e ombra più un colore di tinta, visualizzalo in anteprima su uno sfondo e copia il CSS basato su backdrop-filter.