Binatomy
CSS

Generatore Gradienti CSS

Crea gradienti CSS lineari, radiali e conici con anteprima live

Tipo di gradiente

Color Stop

0%
100%

CSS generato

background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);

Preset

FAQ

Domande Frequenti

Tutto quello che devi sapere sui gradienti CSS

Cosa sono i gradienti CSS?

I gradienti CSS sono transizioni fluide tra due o più colori, create senza immagini. Si distinguono in lineari (da un punto all'altro), radiali (dal centro verso l'esterno) e conici (rotazione attorno a un punto centrale). Sono supportati da tutti i browser moderni.

Come funzionano i color stop?

I color stop definiscono il colore e la posizione (0-100%) in cui quel colore appare nel gradiente. Tra due stop il browser crea automaticamente la transizione. Puoi aggiungere fino a 4 stop per creare gradienti complessi.

Posso usare gradients su testi e bordi?

Sì! Per i testi usa: `background: gradient; -webkit-background-clip: text; color: transparent;`. Per i bordi usa la proprietà `border-image`. Il generatore crea il CSS per il background, ma le stesse regole di colore si applicano ovunque.

什么是CSS渐变?

CSS渐变是两种或多种颜色之间的平滑过渡,无需图像即可创建。分为线性(从一点到另一点)、径向(从中心向外)和锥形(围绕中心点旋转)类型。所有现代浏览器均支持。

颜色节点是如何工作的?

颜色节点定义颜色及其在渐变中出现的位置(0-100%)。两个节点之间浏览器会自动创建过渡效果。您最多可以添加4个节点来创建复杂的渐变。