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.