Design e CSS

Genera gradienti, ombre e scale di colore CSS e verifica il contrasto — codice pronto da copiare.

26 strumenti

Codice in immagine

Trasforma uno snippet di codice in un'elegante immagine PNG con evidenziazione della sintassi nel tuo browser, con tema, sfondo a gradiente o trasparente e spaziatura interna — senza alcun caricamento.

Verificatore di contrasto dei colori

Controlla il rapporto di contrasto WCAG tra un colore HEX di primo piano e uno di sfondo e verifica se supera AA e AAA per testo normale e grande.

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 di sfumature 50-950 in stile Tailwind, miscelando verso il bianco e il nero, ogni livello con campione e HEX copiabile.

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 i quattro punti di controllo di una curva di easing cubic-bezier CSS, trascina le maniglie o digita i valori, visualizza l'anteprima della curva e copia la funzione cubic-bezier().

Playground CSS Flexbox e Grid

Modifica le proprietà del contenitore per Flexbox o Grid in CSS, guarda il layout visivo aggiornarsi in tempo reale e copia il CSS generato.

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.