Gradiente Casuale

La Geometria di Due Colori

Un gradiente lineare CSS è definito da tre elementi: un angolo di direzione, un colore iniziale e un colore finale. Il browser calcola ogni sfumatura intermedia lungo l'asse angolare utilizzando l'interpolazione lineare nello spazio colore sRGB. Zero gradi punta verso l'alto, 90 gradi punta verso destra e 180 gradi punta verso il basso. Ogni angolo tra 0 e 359 è valido. Questo strumento seleziona tutti e tre i valori indipendentemente dalla Web Cryptography API, producendo 16,7 milioni × 16,7 milioni × 360 ≈ 100 quadrilioni di gradienti distinti.

Perché i Gradienti Casuali Sorprendono

Josef Albers, il maestro del Bauhaus che trascorse decenni a studiare l'interazione dei colori, dimostrò che lo stesso colore appare completamente diverso a seconda dei suoi vicini. Un arancione caldo posizionato accanto al blu intenso sembra brillare. Posizionato accanto al rosso, arretra. La generazione casuale di gradienti produce combinazioni che un designer intenzionale potrebbe non tentare mai, e alcuni di questi abbinamenti inaspettati rivelano una bellezza sorprendente. Il gradiente complementare qui sotto emerge dai lati opposti della ruota dei colori, creando la massima energia visiva attraverso il solo contrasto di tonalità.

Le combinazioni analoghe, in cui entrambi i colori condividono una regione tonale simile, producono gradienti più morbidi e atmosferici. Queste appaiono circa il 25% delle volte nella generazione puramente casuale.

Lo Spettro dell'Armonia

Il pannello delle statistiche etichetta ogni gradiente in base alla sua relazione cromatica. Le coppie monocromatiche differiscono di meno di 15 gradi sulla ruota dei colori, producendo sottili variazioni tonali. Le coppie analoghe (distanti da 15 a 45 gradi) condividono un vicinato cromatico. I gradienti contrastanti coprono da 90 a 150 gradi. Le coppie complementari si trovano sui lati opposti della ruota (distanti da 150 a 180 gradi), creando la tensione visiva più forte. L'etichetta si aggiorna ad ogni generazione, trasformando ogni clic in una micro lezione di teoria del colore.

CSS Pratico

Il gradiente generato si copia direttamente come valore CSS linear-gradient(). Usalo come proprietà background su qualsiasi elemento. Sovrapponilo dietro al testo con background-clip: text per una tipografia a gradiente. Sovrapponi una variante semi-trasparente alle immagini. Applicalo a pulsanti, card, sezioni hero o schermate di caricamento. L'angolo e i colori sono la specifica completa: incolla, regola l'opacità se necessario, pubblica.

Privato per Architettura

Sia i colori che l'angolo provengono dalla Web Cryptography API del tuo browser. Il server consegna questa pagina e ha finito. I tuoi gradienti generati, la tua cronologia e il conteggio delle generazioni rimangono nel tuo browser. Il server non memorizza nulla. Condividere l'URL condivide lo strumento, mai alcun risultato generato. Il browser di ogni visitatore produce risultati completamente indipendenti.

Ispirazione dai Gradienti nel Mondo Reale

La generazione casuale rivela combinazioni inaspettate, ma i progetti reali mostrano come le relazioni cromatiche funzionino effettivamente nella pratica. Mentre questo strumento genera gradienti CSS freschi da due colori indipendenti e un angolo casuale, Color Discovery esplora tavolozze tratte da lavori creativi completati in architettura, design del prodotto, packaging e interni. Queste tavolozze dimostrano come le tonalità interagiscono con materiali reali, condizioni di illuminazione e contesti visivi. Se un gradiente generato casualmente accende un'idea, sfogliare tavolozze dal mondo reale può aiutare a perfezionarla in una combinazione collaudata nel design professionale. Che tu stia costruendo uno sfondo UI, selezionando finiture di materiali o cercando la giusta atmosfera cromatica, scopri di più su Color Discovery.