CSS gradienta ģenerators
Kas ir CSS gradients?
CSS gradienti ļauj attēlot vienmērīgas pārejas starp divām vai vairākām krāsām bez attēlu failu izmantošanas. Ir trīs veidi: linear-gradient (gar taisnu līniju), radial-gradient (izstarojot no centrālā punkta) un conic-gradient (griežoties ap centrālo punktu). Gradientus izmanto foniem, pogām, pārklājumiem un dekoratīviem elementiem.
Kā lietot CSS gradienta ģeneratoru
-
Izvēlieties iepriekš iestatītu vērtību no paraugiem vai konfigurējiet savu gradientu.
-
Izvēlieties gradienta veidu: linear, radial vai conic.
-
Pielāgojiet leņķi (linear/conic) vai formu (radial).
-
Rediģējiet krāsu apstāšanās punktus — mainiet krāsas un pozīcijas (0–100%).
-
Pievienojiet vai noņemiet krāsu apstāšanās punktus pēc vajadzības.
-
Nokopējiet CSS un ielīmējiet to savā stila lapā.
Bieži uzdotie jautājumi
Kā izveidot pārredzamu gradientu? Izmantojiet rgba() vai hsla() krāsu vērtības ar alfa kanālu 0 pilnīgai caurspīdīgumam. Piemēram, krāsu pietura rgba(0,0,0,0) ir pilnīgi caurspīdīga melna, noderīga attēlu izdzēšanas pārklājumiem.
Kā izveidot cietu krāsu pieturi (bez pārejas)? Novietojiet divas krāsu piestūres vienā vietā — vienu beidzot un vienu sākot tajā punktā. Piemēram, sarkans 50%, zils 50% rada tūlītēju pāri no sarkana uz zilu viduspunktā bez gradientu pārejas.
Kādas pārlūkprogrammas atbalsta koniskos gradientus? Konisko gradientu atbalsta visos modernās pārlūkprogrammās (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Tie netiek atbalstīti pārlūkprogrammā Internet Explorer.
Vai varu izmantot vairākus gradientus vienā elementā? Jā. CSS background pieņem ar komatiem atdalītu slāņu sarakstu. Varat sakraut gradientus, tos kombinēt ar fona attēliem un kontrolēt katra slāņa pozīciju un izmēru neatkarīgi.
Keywords: CSS gradienta ģenerators, lineārs gradients, radiāls gradients, konisks gradients, CSS fona ģenerators, gradienta krāsu atlasītājs, CSS gradienta rīks