LibraTool logoLibraTool

ነፃ CSS Gradient ፈጣሪ

ቀጥተኛ፣ ክብ እና ሾጣጣ CSS gradientsን ከቀጥታ ቅድመ-እይታ ጋር ይፍጠሩ። CSSን በአንድ ጠቅ ይቅዱ።

ከተጫነ በኋላ ከመስመር ውጭ ይሠራል
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);
#14b8a60%
#6366f1100%

ቅድመ ማዋቀሮች

እንዴት እንደሚሠራ

የቀለም ቅልመት አመንጪው የCSS ቅልመት ሕብረቁምፊዎችን በቀጥታ በአሳሹ ውስጥ ይገነባል — ምንም ላይብረሪ፣ ምንም አገልጋይ፣ ምንም ስቀላ የለም። በእጅ የተጻፈ ተግባር ትክክለኛውን የlinear-gradient፣ radial-gradient ወይም conic-gradient አገባብ ከቀለም ማቆሚያዎችዎ እና ከማዕዘኑ በቀጥታ ያቀናጃል፣ ከዚያም ውጤቱን ለመረጡት የውጤት ዒላማ ይቀርጻል።

  1. 1
    ማቆሚያዎችን እና አቅጣጫን ያዋቅሩ
    የአሳሹን አብሮገነብ ቀለም መራጭ በመጠቀም ከ2 እስከ 6 የቀለም ማቆሚያዎችን ያዘጋጃሉ፣ ከዚያም እያንዳንዱን ማቆሚያ በክልል ተንሸራታች ከ0–100% ባለው ዘንግ ላይ ያስቀምጣሉ። ለመስመራዊ እና ለconic ቅልመቶች ማዕዘንም (0–360°) ይመርጣሉ፤ ለክብ ቅልመቶች ቅርጹን (ኤሊፕስ ወይም ክብ) እና ቅልመቱ ምን ያህል እንደሚዘረጋ የሚቆጣጠረውን የመጠን ቁልፍ ቃል ይመርጣሉ።
  2. 2
    buildCss የቅልመት ሕብረቁምፊውን ያቀናጃል
    በእያንዳንዱ ለውጥ፣ አካባቢያዊ buildCss ተግባር መለኪያዎችዎን ወደ ትክክለኛው የCSS ተግባር ጥሪ ያጣምራል — ለምሳሌ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)። ምንም ላይብረሪ አይሳተፍም፤ ሕብረቁምፊው በቀላል የJavaScript አብነት አመክንዮ ይገነባል እና በቀጥታ ከማቆሚያዎቹ ድርድር ይጣመራል።
  3. 3
    የቀጥታ ቅድመ-እይታ በውስጥ ቅጥ ይታያል
    የተቀናጀው የቅልመት ሕብረቁምፊ እንደ ውስጥ የዳራ ቅጥ በቀጥታ በአንድ div አካል ላይ ይተገበራል፤ ስለዚህ የአሳሹ የራሱ CSS ሞተር ቅድመ-እይታውን ያሳያል። ምንም canvas ወይም ምስል አይሳተፍም — የሚያዩት በእውነቱ እየተተገበረ ያለውን የCSS ንብረት ነው።
  4. 4
    በአራት ቅርጸቶች ለመቅዳት ዝግጁ ውጤት
    የቅርጸት መራጭ ተመሳሳዩን የቅልመት ሕብረቁምፊ ወደ ቀላል CSS (background: ...)፣ ጠንካራ ቀለም መጠባበቂያ ያለው የCSS ብሎክ፣ የTailwind የዘፈቀደ-እሴት ክፍል ወይም የSCSS ተለዋዋጭ መግለጫ ይቀይራል። ቅዳን መጫን የተመረጠውን ውጤት በnavigator.clipboard.writeText ወደ ቅንጥብ ሰሌዳ ይጽፋል። አሁን ያለው ቅልመት በURL hash ውስጥም ይቀመጣል፤ ስለዚህ ዕልባት ማድረግ ወይም ማጋራት ይችላሉ።

ተዛማጅ መሳሪያዎች

ተደጋጋሚ ጥያቄዎች