Generator Gradient CSS
Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
Ce este un gradient CSS?
Un gradient CSS este o valoare imagine CSS care afișează tranziții fluide între două sau mai multe culori fără fișiere imagine. Gradienturile sunt randate de browser, fiind independente de rezoluție și foarte performante.
Ce tipuri de gradienturi CSS sunt suportate?
Acest generator suportă trei tipuri: linear-gradient (culori de-a lungul unei linii drepte), radial-gradient (culori care radiază din centru) și conic-gradient (culori care se rotesc în jurul unui punct central).
Diferența dintre gradient liniar și radial?
Gradienturile liniare tranziționează culorile de-a lungul unei linii drepte definite de un unghi sau cuvânt cheie de direcție. Gradienturile radiale tranziționează culorile spre exterior dintr-un punct central în forme circulare sau eliptice.
Câte opriri de culoare pot folosi?
Puteți folosi câte opriri de culoare aveți nevoie. Fiecare oprire definește o culoare și opțional o poziție (0% la 100%) de-a lungul liniei de gradient.
Cum folosesc codul CSS generat?
Copiați codul CSS generat și lipiți-l ca valoare pentru proprietatea background sau background-image în foaia de stil CSS. Codul funcționează în toate browserele moderne.
Ce sunt opririle de culoare în gradienturi?
Opririle de culoare definesc culori specifice la poziții specifice de-a lungul liniei de gradient. De exemplu, "red 0%, blue 50%, green 100%" creează un gradient de la roșu prin albastru la verde.
Pot crea gradienturi unghiulare?
Da, gradienturile liniare suportă valori de unghi de la 0deg la 360deg. Puteți folosi și cuvinte cheie de direcție precum "to right", "to bottom", "to top left".
Gradienturile CSS sunt responsive?
Da, gradienturile CSS sunt inerent responsive deoarece sunt vectoriale și randate de browser. Se scalează perfect la orice dimensiune fără pierdere de calitate.
Gradienturile CSS afectează performanța paginii?
Gradienturile CSS sunt în general foarte performante. Elimină cererile HTTP pentru fișiere imagine și sunt accelerate hardware. Gradienturile extrem de complexe pot afecta randarea pe dispozitive slabe.
Pot folosi gradienturi pentru fundaluri și borduri?
Da, gradienturile pot fi folosite pentru background-image, border-image, mask-image și orice proprietate care acceptă valori imagine CSS.
Ce browsere suportă gradienturi CSS?
Toate browserele moderne suportă gradienturi CSS: Chrome, Firefox, Safari, Edge și Opera. Suportul este excelent din IE10. Prefixele vendor nu mai sunt necesare.
Cum creez un gradient repetat?
Folosiți repeating-linear-gradient sau repeating-radial-gradient în loc de versiunile standard. Acestea repetă modelul de gradient pentru a umple întregul element.
Pot anima gradienturi CSS?
Gradienturile CSS nu pot fi animate direct cu tranziții CSS. Puteți anima background-position, background-size sau folosi proprietăți CSS personalizate cu @property.
Acest generator de gradienturi este gratuit?
Da, acest generator CSS gradient este complet gratuit. Fără înregistrare, fără limite de utilizare, tot codul generat este al dvs. pentru orice proiect.
Cum se folosește Generator Gradient CSS
Creează gradiente CSS vizual și copiază instantaneu CSS gata de producție. Randarea are loc local în browserul tău, fără încărcări.
- Selectează Type gradientului: linear-gradient sau radial-gradient.
- Setează Angle pentru gradiente liniare sau alege o Shape precum circle sau ellipse pentru cele radiale.
- Adaugă, recolorează și trage punctele de culoare în secțiunea Color Stops.
- Apasă o mostră de sub Presets pentru a porni de la un amestec gata făcut.
- Copiază CSS-ul generat și lipește-l în foaia ta de stil.
Pune două puncte de culori diferite pe aceeași poziție pentru o margine netă — o modalitate rapidă de a face dungi fără imagini.
Instrumente conexe
- Generator Box Shadow CSS Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
- Generator de Border Radius CSS Generator vizual de border-radius CSS. Ajustați fiecare colț independent cu previzualizare în timp real și copiați codul CSS instantaneu.
- Generator CSS Grid Generator vizual gratuit CSS Grid cu previzualizare live. Proiectați layout-uri de grilă responsive interactiv și exportați cod CSS gata de producție.
- Generator CSS Flexbox Generator vizual CSS Flexbox cu previzualizare live. Ajustați proprietățile flex și obțineți cod CSS gata de utilizare.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.