Generator CSS Gradiente

Diferența dintre Linear, Radial și Conic Gradients

În specificațiile CSS Images Module Level 3 și Level 4, gradientele sunt considerate tipuri speciale de imagini generate matematic de către motorul browserului:

• linear-gradient(): Culorile curg de-a lungul unei linii drepte definite printr-un unghi (în grade, de exemplu 90deg, 135deg) sau cuvinte cheie direcționale (to right, to bottom right).
• radial-gradient(): Culorile pornesc dintr-un punct central (origine) și radiază spre exterior sub formă circulară sau eliptică. Ideal pentru lumini ambientale sau efecte de tip „spotlight”.
• conic-gradient(): Culorile se rotesc în jurul unui punct central, similar acelor unui ceasornic. Este funcția perfectă pentru crearea graficelor circulare de tip plăcintă (pie charts), a paletelor de culori cromatice și a bordurilor rotative animate.

Exemplu de diagramă circulară folosind conic-gradient:

/* Creare grafic circular cu o singură linie de cod CSS! */
.pie-chart {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    #d6472e 0% 40%,    /* 40% din cerc */
    #e8b339 40% 75%,   /* 35% din cerc */
    #123657 75% 100%   /* 25% din cerc */
  );
}

Gradiente Complexe de tip Mesh (Aurora) cu CSS Pur

Efectele moderne de tip „Aurora Mesh Gradient” (fundaluri organice cu noduri cromatice fluide utilizate pe landing page-uri de startup-uri tehnologice) pot fi realizate fără imagini externe, combinând mai multe gradiente radiale poziționate absolut:

/* Mesh Gradient profesional fluid cu multiple straturi */
.hero-mesh-bg {
  background-color: #0e2a47;
  background-image: 
    radial-gradient(at 15% 20%, rgba(214, 71, 46, 0.45) 0px, transparent 50%),
    radial-gradient(at 85% 25%, rgba(232, 179, 57, 0.40) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(18, 54, 87, 0.60) 0px, transparent 60%);
  filter: blur(40px); /* Opțional pentru o difuzie ultra-fină */
}

Nou în CSS Modern: Spații de Culoare pentru Interpolare (Color Spaces)

În specificația clasică CSS, interpolarea gradientelor are loc în spațiul implicit sRGB. Când îmbini două culori complementare (cum ar fi albastru și portocaliu), mijlocul gradientului trece adesea printr-o "zonă gri moartă" (gray dead zone), spălăcită și neatrăgătoare.

CSS Color Module Level 4 permite specificarea spațiului de interpolare direct în sintaxa funcției folosind cuvântul cheie in:

/* Gradient vibrant fără zonă gri moartă în OKLCH */
background: linear-gradient(in oklch to right, #0052cc, #ff5630);

/* Interpolare pe cercul cromatic în HSL cu parcurgere completă */
background: linear-gradient(in hsl longer hue to right, blue, red);

Gradiente Repetitive: Texturi și Dungă de Atenționare

Cu ajutorul funcțiilor repeating-linear-gradient() poți genera dungi de șantier, modele de carouri sau grilaje tehnice cu precizie microscopică:

/* Dungă de atenționare la 45 grade */
.hazard-stripes {
  background: repeating-linear-gradient(
    45deg,
    #e8b339,
    #e8b339 12px,
    #1c2530 12px,
    #1c2530 24px
  );
}

Întrebări Frecvente (FAQ) despre Gradiente CSS