CSS gradienta ģenerators

Atlasiet krāsas un leņķi, lai ģenerētu CSS gradienta kodu ar priekšskatījumu

JaunumiPievienots CSS gradientu ģenerators, ģenerē kodu, izvēloties krāsu un leņķiSkatīt atjauninājumus

Funkcijas

Priekšskatījums un kods atjauninās vienlaikus

Mainot krāsas vai leņķus, izskats un CSS mainās vienlaicīgi

Lineāro, radiālo un konisko atbalsts

Detalizēti norādiet leņķi, formu un centra pozīciju katram tipam

Līdz 10 krāsām, kuras var pielāgot vilkšanas iespējā

Pielāgojiet krāsu pozīcijas vilkšanas iespējā uz joslas, caurspīdīgumu ar slīdni

8 paraugu un nejauša ģenerēšana

Sāciet ar standarta vai nejaušām krāsu kombinācijām un veiciet smalkus pielāgojumus

Lietošana

Atlasiet tipu

Izvēlieties gradienta tipu: lineāro, radiālo vai konisko

Nosakiet krāsas

Atlasiet krāsas pēc koda vai paraugiem, pievienojiet krāsas un pielāgojiet pozīciju un caurspīdīgumu

Pielāgojiet orientāciju

Lineārajam: norādiet leņķi vai virzienus; radiālajam un koniskajam: norādiet centra pozīciju

Kopējiet kodu

Nospiediet "Kopēt", lai vienrindas CSS iesniegtu savā stilā

Lietošanas gadījumi

Varoņu attēla fona izveide

Nosakiet vietnes augšdaļas vai pogas fona krāsu bez koda rakstīšanas

Emuāra virsraksta krāsu atlase

Atlasiet tuvu krāsu kombināciju no paraugiem, lai pielāgotu raksta virsraksta fonu

Pārklājums pār fotoattēliem

Izveidojiet pusgaismu slāni, samazinot caurspīdīgumu fotoattēlam pāri

Daudzfāzīga gradienta pielāgošana

Vilkšanas iespējā pakāpeniski pielāgojiet 3+ krāsu robežas pozīcijas

Pamatizpratne

linear, radial un conic atšķirības

CSS gradientiem ir 3 dažādas funkcijas ar dažādiem krāsu maiņas veidiem, visas tiek izmantotas background rekvizītā.

linear-gradient：linear-gradient ir lineārs gradients, kur krāsa mainās pa norādīto leņķi virzienā.
radial-gradient：radial-gradient ir radiāls gradients, kur krāsa izplešas apļa vai elipses formā no centra pozīcijas uz āru.
conic-gradient：conic-gradient ir konisks gradients, kur krāsa mainās pulksteņrādītāja virzienā apkārt centra pozīcijai.

Leņķa un virziena atslēgvārdu atbilstība

linear-gradient leņķis sākas ar 0deg virzienā no apakšas uz augšu un griežas pulksteņrādītāja virzienā, palielinot vērtību. Leņķi var arī rakstīt kā virziena atslēgvārdus, piemēram, "to right"; 90deg ir tas pats kā "to right", 180deg ir tas pats kā "to bottom".

Krāsu stopu un caurspīdīguma rakstīšana

Krāsu stops (color stop) ir vieta gradientā, kur tiek parādīta konkrēta krāsa; 0% apzīmē sākumpunktu, 100% apzīmē beigu punktu. Piemēram, "#3B82F6 0%, #8B5CF6 100%" norāda pāreju no zila sākumpunktā uz violetu beigās.

#RRGGBB formāts：#RRGGBB formāts izsaka krāvu kā sarkanu, zaļu un zilu intensitāti, izmantojot 2 ciparus heksadecimālā - #FF0000 ir necaurspīdīga sarkana.
rgba formāts：rgba formāts izsaka krāvu ar sarkanu, zaļu un zilu vērtībām (0–255) un caurspīdīgumu (0–1); 0,5 caurspīdīgums nozīmē puscaurspīdīgu krāvu.