ነጻ መለወጫ

CSS ቅልመት ጀነሬተር

ከቀጥታ ቅድመ እይታ ጋር CSS ቅልመትን በእይታ አመንጭ። መስመራዊ፣ ራዲያል እና ሾጣጣ ቀስቶችን በብጁ የቀለም ማቆሚያዎች ይፍጠሩ - ነፃ እና ከደንበኛ ጎን።

የቀጥታ ቅድመ እይታ
የሲኤስኤስ ውፅዓት
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
አንግል (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

ስላዚህ መሳሪያ

በሚያምር የሲኤስኤስ መስመራዊ እና ራዲያል ቅልመት በእይታ አርታዒ ይፍጠሩ። ቀለሞችን ይምረጡ ፣ ማቆሚያዎችን ያስተካክሉ ፣ አቅጣጫ ወይም አንግል ይቀይሩ እና የቀጥታ ቅድመ እይታ ዝመናን በእውነተኛ ጊዜ ይመልከቱ። የመነጨውን የሲኤስኤስ ኮድ ይቅዱ - ለአሮጌ አሳሾች የአቅራቢ ቅድመ ቅጥያዎችን ጨምሮ - እና በቀጥታ ወደ እርስዎ የቅጥ ሉህ ውስጥ ይለጥፉት።

እንዴት ይጠቀሙ

  1. የግራዲየንት አይነት ይምረጡ፡ መስመራዊ ወይም ራዲያል።
  2. የግራዲየንት አሞሌውን ጠቅ በማድረግ እና ቀለሞችን በመምረጥ የቀለም ማቆሚያዎችን ያክሉ።
  3. መቆጣጠሪያዎችን በመጠቀም የግራዲየንት አንግል (ሊኒየር) ወይም ቦታ (ራዲያል) ያስተካክሉ።
  4. የተፈጠረውን የሲኤስኤስ ኮድ ከውጤት ፓነል ይቅዱ።

በተደጋጋሚ የሚጠየቁ ጥያቄዎች

CSS ቅልመት በሁሉም አሳሾች ውስጥ ይሰራሉ?
ዘመናዊ የሲኤስኤስ ቅልመት (መስመራዊ-ግራዲየንት፣ ራዲያል-ግራዲየንት) በሁሉም ወቅታዊ አሳሾች ውስጥ Chrome፣ Firefox፣ Safari እና Edgeን ጨምሮ ይደገፋሉ። መሣሪያው እንደ አማራጭ የድሮ የአሳሽ ስሪቶች -webkit- ቅድመ ቅጥያዎችን መፍጠር ይችላል።
ባለብዙ ቀለም ቀስቶችን መፍጠር እችላለሁ?
አዎ። የሚፈልጉትን ያህል የቀለም ማቆሚያዎች ያክሉ። እንዲሁም ቀለሞች የሚቀላቀሉበትን ለመቆጣጠር የእያንዳንዱን ማቆሚያ ቦታ ማስተካከል ይችላሉ. ይህ ውስብስብ ቀስተ ደመና፣ ጀንበር ስትጠልቅ ወይም ብጁ የምርት ምረቃዎችን ይፈቅዳል።
በመስመራዊ እና ራዲያል ቅልመት መካከል ያለው ልዩነት ምንድን ነው?
መስመራዊ ቅልመት ቀለሞችን በቀጥታ መስመር (ከላይ ወደ ታች፣ ከግራ ወደ ቀኝ፣ ሰያፍ ወይም ማንኛውም አንግል) ይሸጋገራል። ራዲያል ግራዲየሮች በክብ ወይም ሞላላ ቅርጽ ከመሃል ነጥብ ወደ ውጭ ቀለሞችን ይሸጋገራሉ.
ለጽሑፍ ቅልመትን እንደ ዳራ መጠቀም እችላለሁ?
አዎ። ዳራ-ክሊፕን ተጠቀም፡ ጽሑፍ ከ -webkit-text-fill-color ጋር፡ ቅልመትን ወደ ጽሑፍ ለመተግበር ግልጽነት ያለው። የመነጨው CSS የግራዲየንት ፍቺን ይሰጣል - ለግራዲየንት ጽሑፍ ከነዚህ ንብረቶች ጋር ያዋህዱት።