Gradiente CSS

Un gradient este o tranziție lină între două sau mai multe culori. În CSS, gradienții sunt utilizați pentru a crea fundaluri sau pentru a aplica efecte vizuale interesante asupra elementelor.

Tipuri de gradiente

Există două tipuri principale de gradiente în CSS:

• Gradiente liniare: Gradientele liniare se deplasează pe o linie dreaptă, de obicei de sus în jos, stânga-dreapta sau în orice altă direcție definită.
• Gradiente radiale: Gradientele radiale se răspândesc de la un punct central către margini, creând un efect circular.

Exemplu de gradient liniar

Un gradient liniar se poate crea cu următoarea sintaxă CSS:

        
background: linear-gradient(to right, #A3CEF1, #F8CFA4);
        
    

În acest exemplu, culoarea de început este #A3CEF1 (albastru pastel), iar culoarea finală este #F8CFA4 (piersică pastel).

Exemplu de gradient radial

Un gradient radial se poate crea astfel:

        
background: radial-gradient(circle, #F8CFA4, #C5E1A5);
        
    

Aici, gradientul începe cu culoarea #F8CFA4 (piersică pastel) în centrul cercului și se amestecă în direcția spre culoarea #C5E1A5 (verde mentă pastel).

Concluzie

Gradienții CSS adaugă profunzime și textură designului tău web. Experimentând cu diferite direcții și culori, poți crea fundaluri interesante și efecte vizuale plăcute.