Strumenti di CSS e design online gratuiti

Generatori visivi di CSS, colori, ombre e gradienti.

9 strumenti

Generatore di box-shadow CSSProgetta ombre realistiche sovrapponendo più livelli, come fanno i migliori design system. Regola offset, sfocatura, espansione, colore e opacità di ogni livello e copia il risultato in CSS o come classe Tailwind.

Convertitore di colori (HEX, RGB, HSL, CMYK, OKLCH)Scrivi un colore in qualsiasi formato — #hex, rgb(), hsl(), hwb(), oklch() o un nome come «tomato» — e ottieni subito tutte le equivalenze, il contrasto WCAG su bianco e nero e una scala di tinte e ombre.

Generatore di palette di coloriParti dal colore del tuo brand e ottieni una scala completa da 50 a 950, percettivamente uniforme e pronta per il tuo design system, insieme a combinazioni armoniche. Il colore originale resta identico nel passo corrispondente.

Generatore di gradienti CSSProgetta sfondi sfumati trascinando i punti di colore su una barra, scegli il tipo (lineare, radiale o conico) e copia un CSS pronto per la produzione, con colore di fallback e versione moderna in OKLCH senza zone grigie.

Generatore CSS GridImposta colonne, righe e spazi con i cursori e vedi il risultato dal vivo. Copia CSS e HTML pronti da incollare nel tuo progetto.

Generatore di glassmorphism (vetro smerigliato)Progetta card e pannelli in vetro smerigliato vedendo subito il risultato su sfondi diversi. Il CSS generato include il prefisso -webkit- che Safari richiede ancora.

Estrattore di palette coloriCarica una foto, un logo o un’illustrazione e scopri i suoi colori principali. Scegli quanti colori vuoi, copia ogni HEX con un clic o tutta la palette come variabili CSS.

Generatore di neumorfismo (Soft UI)Il neumorfismo fa sembrare gli elementi emergere dallo sfondo con due ombre opposte, una chiara e una scura. Regola ogni parametro, scegli da dove arriva la luce e copia il CSS.

Generatore di onde e blob SVGProgetta separatori di sezione ondulati e forme organiche uniche. Regola punti, ampiezza e colori, rigenera finché ti piace e copia il codice SVG o scarica un PNG.