Milano, 1981: un gruppo di designer riunito da Ettore Sottsass fonda il Memphis Group e rompe con decenni di minimalismo funzionalista a colpi di colori accesi e geometrie decise — un'estetica che, decenni dopo, ritorna riconoscibile nei gradienti audaci del web design contemporaneo.
Tre modi di distribuire il colore
linear-gradient(45deg, red, blue) distende il colore lungo una linea retta a un angolo definito — il tipo più comune per sfondi di pulsanti, banner e schede. radial-gradient(circle, yellow, orange) distribuisce il colore in cerchi o ellissi concentrici da un punto verso l'esterno, ideale per simulare un fascio di luce. conic-gradient(red, yellow, green, blue, red) ruota il colore attorno a un punto centrale come la lancetta di un orologio, ed è l'unico dei tre in grado di disegnare un grafico a torta o un indicatore di progresso ad anello senza grafica aggiuntiva.
Color stop e motivi ripetuti
Ogni colore può essere ancorato a una posizione percentuale precisa, come in linear-gradient(red 0%, yellow 50%, blue 100%), per controllare quanto bruscamente avviene la transizione. Le funzioni repeating-linear-gradient() e repeating-radial-gradient() ripetono automaticamente la stessa sequenza di color stop, creando motivi a righe o a scacchiera con una sola riga di CSS.
A cosa serve
- Scegliere e copiare rapidamente codice CSS per gradienti già pronto, senza regolare manualmente angoli e colori.
- Capire quale tipo di gradiente sia adatto a un determinato effetto visivo.
- Regolare con precisione le posizioni dei color stop per la transizione desiderata.
Dal design piatto al ritorno del gradiente
Dopo anni di design piatto imposto da iOS 7 nel 2013, il gradiente è tornato con forza nel design digitale a metà del decennio successivo: il rebranding di Instagram del 2016 ha sostituito l'icona della fotocamera con un logo in gradiente arancione-viola, uno stile che ha poi influenzato loghi e schermate di lancio di numerose app in tutta Europa — un ritorno del colore acceso non troppo lontano, nello spirito, dalle intuizioni cromatiche di Sottsass e del Memphis Group.