Preview
An ƙirƙira CSS
Sarrafa Gradient
Shahararrun Saiti
Misalai na Gradient
Bincika waɗannan misalan gradient masu ban sha'awa kuma ku sami wahayi don aikinku na gaba. Danna kowane gradient don loda shi a cikin janareta.
Faɗuwar rana
Kyakkyawan gradient wahayi zuwa ga kyakkyawan faɗuwar rana.
Ruwan Ruwa
A kwantar da hankali gradient evoking ji na bakin tekun ruwa.
Mint Fusion
Sabbin gradient na zamani yana haɗa mint da shuɗin sama.
Lambun Lush
Ƙwararren gradient yana wakiltar kyawawan yanayi.
Mafarkin Cosmic
A sihiri gradient wahayi zuwa ga dare sama.
Sa'ar Zinariya
A dumi gradient kama ainihin magriba.
Takardun Gradient
Menene CSS Gradients?
CSS gradients suna ba ku damar nuna sauye-sauye masu santsi tsakanin launuka biyu ko fiye. Ana iya amfani da su azaman tushen abubuwan abubuwa kuma sun zo cikin nau'ikan iri uku:
- Litattafan Gradients:Launuka masu canzawa tare da madaidaiciyar layi.
- Radial Gradients:Launuka masu canzawa daga wurin tsakiya zuwa waje.
- Conic Gradients:Launuka masu canzawa a kusa da wurin tsakiya a cikin da'irar.
Yadda ake Amfani da Gradients
Da zarar kun ƙirƙiri gradient ta amfani da kayan aikin mu, zaku iya amfani da lambar CSS a cikin ayyukanku:
- Kwafi lambar CSS daga janareta.
- Manna shi a cikin fayil ɗin CSS ɗin ku, ko amfani da shi ta layi a cikin abubuwan HTML ɗinku.
- Aiwatar da gradient zuwa kowane kashi ta amfani da
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Yi amfani da fiye da launuka biyu don ƙarin hadadden tasirin gradient.
- Daidaita wurare masu launi don sarrafa inda canje-canje ke faruwa.
- Haɗa gradients da yawa don ƙarin tasirin ƙirƙira.
- Don conic gradients, canza tsakiyar yana haifar da alamu masu ban sha'awa.
- Ajiye gradients da kuka fi so don amfani daga baya.
Taimakon Mai Binciken Bincike
CSS gradients ana samun tallafi sosai a cikin masu bincike na zamani. Duk da haka, tsofaffin masu bincike kamar Internet Explorer na iya ba su yin su daidai. Koyaushe samar da launi na baya:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Game da Wannan Kayan Aikin
An ƙera CSS Gradient Generator ɗin mu don taimakawa masu haɓakawa da masu ƙira su ƙirƙiri kyawawan gradients ba tare da wahala ba. Ko kuna aiki akan gidan yanar gizo, aikace-aikace, ko kawai kuna son yin gwaji da launuka, wannan kayan aikin yana sauƙaƙa don samar da ingantaccen gradient don aikinku.
Features
Sauƙi don Amfani
Intuitive interface don ƙirƙirar gradients.
Zane Mai Amsa
Yana aiki daidai akan duk girman allo.
Kwafi-Manna Shirye
Samu lambar CSS mai tsabta nan take.
Akwai Saitattun Saituna
Fara da kyawawan gradients waɗanda aka riga aka ayyana.
Related Tools
Kasa zuwa CSS Converter
Canza Ƙananan lambar ku zuwa CSS. Mai sauri, mai sauƙi, kuma amintacce.
CSS3 Transition Generator
Canjin yanayin haske mai laushi
CSS Beautifier
Tsara da ƙawata lambar CSS ɗin ku tare da ƙwararrun ƙwararru
Mai Rarraba Matsi
Canza tsakanin raka'a na matsin lamba daban-daban tare da daidaito don aikin injiniya da buƙatun kimiyya
Ƙirƙiri Kyawawan Rubutun CSS Gradient Ba tare da Kokari ba
Ƙirƙirar Tasirin Rubutun Gradient mai ban mamaki don Gidan Yanar Gizonku
Juyawa Juzu'i
Canza tsakanin raka'a daban-daban na mitar tare da daidaito don ƙididdige aikin injiniya da ƙididdiga na kimiyya