Gradient

CSS Gradient Generator

ያልተገደቡ ማቆሚያዎች፣ OKLCH-ን የሚያውቅ interpolation እና Tailwind v4 utility ውጤት ያሉት linear፣ radial እና conic gradients ይገንቡ። የቀጥታ ቅድመ-እይታ፣ ከ30 በላይ presets፣ በአሳሽዎ ውስጥ።

Linear በተመረጠ አንግል በቀጥታ መስመር ይዋሃዳል (0° = ወደ ላይ፣ 90° = ወደ ቀኝ)። Radial ከማዕከል ነጥብ ወደ ውጭ ይዋሃዳል — circle ወይም ellipse፣ እንደ farthest-corner ያሉ size keywords ጋር። Conic በማዕከል ነጥብ ዙሪያ ይሽከረከራል — የቀለም ማቆሚያዎች እንደ ሰዓት እጆች በአንግል ላይ ይቀመጣሉ። Conic ለpie charts፣ dial readouts እና ሰው ሰራሽ color-wheel ዳራዎች ጥሩ ነው።

ተመሳሳይ ያልሆኑ hues መካከል ሲሸጋገሩ — ለምሳሌ ሰማያዊ → ቢጫ ወይም ቀይ → አረንጓዴ። ነባሪ sRGB interpolation በጭቃ ግራጫ መካከለኛ ነጥብ ያልፋል፤ OKLCH (CSS Color Module 4 in oklch) በስሜት አንድ ወጥ ቦታ ላይ ስለሚሰራ መካከለኛውን ነጥብ ብሩህ ያደርገዋል። በተመሳሳይ hues መካከል ለሁለት-ማቆሚያ gradients ልዩነቱ ትንሽ ነው። ለብዙ-ማቆሚያ ወይም ሰፊ-hue-range gradients OKLCH በከፍተኛ ሁኔታ የተሻለ ነው።

የቀለም ማቆሚያዎች
CSS
Tailwind v4
JSON
Presets

ለፕሮዳክሽን CSS gradients የተሰራ

Linear / radial / conic፣ OKLCH-ለስላሳ፣ Tailwind-አዋቂ — እና በትክክል ለመጠቀም አስደሳች የሚያደርጉ ጥቂት ትንንሽ ማስተካከያዎች።

ሦስት የgradient ዓይነቶች

Linear ከ0-360° አንግል ጋር፣ radial ከcircle/ellipse + size + position ጋር፣ conic ከfrom-angle + position ጋር። ሁሉም ስታንዳርድ የሚከተል CSS Images Module Level 4 syntax ያወጣሉ።

እስከ 12 የቀለም ማቆሚያዎች

በማንኛውም ፐርሰንት ላይ ማቆሚያዎችን ይጨምሩ፣ position slider ን በመጎተት ያስተካክሉ፣ swatch ን ጠቅ በማድረግ ቀለም ይምረጡ ወይም HEX ይለጥፉ። ማቆሚያዎች በውጤት ላይ በራስ-ሰር ይደረደራሉ። ለማስወገድ × ይጫኑ (ቢያንስ 2 ማቆሚያዎች)።

OKLCH-ን የሚያውቅ interpolation

በነባሪ sRGB እና ዘመናዊ in oklch interpolation መካከል ይቀያይሩ። OKLCH በስሜት ለስላሳ መካከለኛ ነጥቦችን ይሰጣል — በhue ዝላይ ላይ ጭቃ-ግራጫ ባንዶች የሉም። CSS Color 4 ን ያላስተናገዱ አሳሾች ላይ በተፈጥሯዊ ሁኔታ ይመለሳል።

CSS፣ Tailwind v4፣ JSON ውጤት

ሦስት የውጤት ፓኔሎች በቀጥታ ይዘመናሉ፦ ጥሬ CSS (background-image: linear-gradient(...))፣ Tailwind v4 arbitrary-value utility (bg-[linear-gradient(...)])፣ እና ለStyle Dictionary ወይም Figma Tokens ዝግጁ የሆነ JSON design-token snippet።

ከ30 በላይ የተመረጡ presets

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — ለመጫን እና ለማስተካከል ይጫኑ። እያንዳንዱ preset ስም ብቻ ሳይሆን እውነተኛ የፕሮዳክሽን-ጥራት መጀመሪያ ነጥብ ነው።

የቀጥታ ቅድመ-እይታ + በንድፍ ግላዊነት

ቅድመ-እይታ የሚሰጠው በbackground-image በመጠቀም ስለሆነ የሚያዩት በትክክል stylesheet ዎ የሚያመርተው ነው። እያንዳንዱ ፒክስል በአካባቢ ይሰራል — DevTools → Network ይክፈቱ እና ዜሮ outbound requests ያረጋግጡ።

CSS gradient እንዴት እንደሚገነባ

ከባዶ ሰሌዳ ወደ ፕሮዳክሽን-ዝግጁ CSS፣ Tailwind ወይም JSON አራት ደረጃዎች።

  1. 1

    የgradient ዓይነት ይምረጡ

    Linear ለዳራዎች፣ headers፣ hero sections። Radial ለspotlights፣ vignettes፣ ለሚያንጸባርቁ buttons። Conic ለpie charts፣ የቀለም ጎማዎች እና ወቅታዊ ሰው ሰራሽ ዳራዎች። በtabs መካከል ይቀያይሩ — የቀለም ማቆሚያዎችዎ በመቀያየር ይቆያሉ።

  2. 2

    የቀለም ማቆሚያዎችዎን ያስቀምጡ

    picker ለመክፈት የቀለም swatch ን ይጫኑ ወይም HEX ን በቀጥታ ወደ field ይለጥፉ። የማቆሚያውን አቀማመጥ 0-100% ለማዘጋጀት slider ን ይጎትቱ። በትልቁ ክፍተት (ከመካከለኛ ቀለም ጋር) አዲስ ማቆሚያ ለማስገባት + ማቆሚያ ጨምር ይጫኑ። በጠቅላላ እስከ 12 ማቆሚያዎች።

  3. 3

    geometry + interpolation ን ያስተካክሉ

    ለlinear አንግል ያዘጋጁ (0° ወደ ላይ ይጠቁማል፣ 90° ወደ ቀኝ)። ለradial ቅርጽ፣ size keyword እና የመሃል አቀማመጥ ይምረጡ። ለconic የመጀመሪያውን አንግል ያዘጋጁ። በብዙ-hue gradients መካከል በስሜት ለስላሳ መካከለኛ ነጥቦችን ለማግኘት Color interpolation ን ወደ OKLCH ይቀይሩ።

  4. 4

    ውጤቱን ይቅዱ

    ሦስት ፓኔሎች በቀጥታ ይዘመናሉ፦ CSS (background-image:...)፣ Tailwind v4 (bg-[...])፣ JSON (የdesign-token ቅርጽ)። በእያንዳንዱ ላይ ያለውን copy icon ይጠቀሙ ወይም ወደ ፕሮጀክት ለመጣል ዝግጁ የሆነ gradient.css ፋይል ለማስቀመጥ CSS አውርድ ይጫኑ።

ለንድፍ አውጪዎች + ገንቢዎች የተሰራ

ግላዊነት-ቀዳሚ የአሳሽ መሣሪያ Figma + የተለየ gradient ጣቢያ ከመክፈት የሚበልጥባቸው አራት የተለመዱ ሁኔታዎች።

ለማርኬቲንግ ገጽ hero section ዳራ

ከብራንድዎ ጋር የሚቀራረብ preset ይምረጡ፣ ሁለቱን የብራንድ ቀለሞችዎን ወደ ማቆሚያዎች ይጣሉ፣ ለንጹህ መካከለኛ ነጥብ ወደ OKLCH interpolation ይቀይሩ። CSS ን ይቅዱ፣ ወደ hero ዎ stylesheet ይለጥፉ። ጠቅላላ ጊዜ፦ ከ2 ደቂቃ በታች።

የብራንድ-አዋቂ button + card gradients

የ3-ማቆሚያ የብራንድ gradient አንድ ጊዜ ይገንቡ፣ እንደ JSON design token ይቅዱ፣ ወደ Style Dictionary / Figma Tokens ይጣሉ። አሁን በእያንዳንዱ መድረክ ላይ ያለ እያንዳንዱ button + card በrefer ተመሳሳዩን gradient ይጠቀማል። በአንድ ቦታ ያዘምኑ፣ በሁሉም ቦታ ይሰራጫል።

ለcharts + dashboards conic ዳራዎች

ሰው ሰራሽ conic gradients ለpie-chart visuals፣ progress dials ወይም 'data-loading' shimmer states ፍጹም ናቸው። የconic ዓይነት ይምረጡ፣ from-angle ን ያዘጋጁ፣ ማቆሚያዎችን በትክክለኛው ፐርሰንት ላይ ይጣሉ — የሂሳቡ ስሌት አንግሎችን 0-360° ወደ ፐርሰንት አቀማመጦች በትክክል ያዛምዳል።

ለslides፣ social posts፣ hero images ብጁ ዳራዎች

gradient ይገንቡ፣ ከዒላማዎ ጋር ለማዛመድ aspect ratio ያዘጋጁ (16:9 ለslides፣ 1:1 ለIG፣ 3:1 ለX header)፣ ቅድመ-እይታውን screenshot ያንሱ። ወይም CSS ን ወደ አንድ-ጊዜ HTML ፋይል ይቅዱ እና በሚፈልጉት ትክክለኛ የፒክስል መጠን በአሳሽዎ ውስጥ screenshot ያንሱ።

100% ግላዊ — በአሳሽዎ ውስጥ ይሰራል

ቀለሞችዎ እና gradients ዎ መሣሪያዎን ፈጽሞ አይለቁም። DevTools → Network ይክፈቱ እና በማንኛውም ሥራ ጊዜ ዜሮ outbound requests ያያሉ።

  • የgradient string assembly፣ የCSS / Tailwind / JSON serialisation እና የቀጥታ ቅድመ-እይታ ሁሉም በማሽንዎ ላይ እንደ JavaScript ይሰራሉ — ምንም server-side rendering የለም፣ ምንም third-party API የለም።
  • ቅድመ-እይታ የተወላጅ CSS background-image ይጠቀማል — ስለዚህ የተሰራው gradient በተጠቃሚዎችዎ አሳሾች ውስጥ stylesheet ዎ የሚያመርተውን በትክክል ያዛምዳል።
  • መግቢያ የለም፣ በቀለም እሴቶች ላይ telemetry የለም። ለcookie-consent ሁኔታ አንድ ኩኪ እና ለቋንቋ ምርጫ አንድ ብቻ እንጠቀማለን።

ተዛማጅ መመሪያዎች

በCSS gradients፣ OKLCH interpolation እና በdesign-token ስርዓቶች ላይ በእጅ የተመረጡ ንባቦች።

ተደጋግሞ የሚነሱ ጥያቄዎች

በlinear፣ radial እና conic መካከል ያለው ልዩነት ምንድነው?

Linear በተመረጠ አንግል በቀጥታ መስመር ይዋሃዳል (0° = ወደ ላይ፣ 90° = ወደ ቀኝ)። Radial ከማዕከል ነጥብ ወደ ውጭ ይዋሃዳል — circle ወይም ellipse፣ እንደ farthest-corner ያሉ size keywords ጋር። Conic በማዕከል ነጥብ ዙሪያ ይሽከረከራል — የቀለም ማቆሚያዎች እንደ ሰዓት እጆች በአንግል ላይ ይቀመጣሉ። Conic ለpie charts፣ dial readouts እና ሰው ሰራሽ color-wheel ዳራዎች ጥሩ ነው።

OKLCH interpolation መቼ መጠቀም አለብኝ?

ተመሳሳይ ያልሆኑ hues መካከል ሲሸጋገሩ — ለምሳሌ ሰማያዊ → ቢጫ ወይም ቀይ → አረንጓዴ። ነባሪ sRGB interpolation በጭቃ ግራጫ መካከለኛ ነጥብ ያልፋል፤ OKLCH (CSS Color Module 4 in oklch) በስሜት አንድ ወጥ ቦታ ላይ ስለሚሰራ መካከለኛውን ነጥብ ብሩህ ያደርገዋል። በተመሳሳይ hues መካከል ለሁለት-ማቆሚያ gradients ልዩነቱ ትንሽ ነው። ለብዙ-ማቆሚያ ወይም ሰፊ-hue-range gradients OKLCH በከፍተኛ ሁኔታ የተሻለ ነው።

Tailwind v4 ውጤት ምን ይሰጠኛል?

በቀጥታ ወደ JSX / Blade / HTML የሚለጥፉት arbitrary-value utility፦ bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]። ምንም tailwind.config.js ለውጥ አያስፈልግም፤ በማንኛውም Tailwind 4 ፕሮጀክት ይሰራል። የተሰየሙ የቀለም tokens ከመረጡ ከዚያ ይልቅ CSS ን ይቅዱ እና በእጅ ይቀይሩ።

Gradients በጥንታዊ አሳሾች ይሰራሉ?

Linear እና radial gradients ከ2014 ጀምሮ በሁሉም ቦታ ድጋፍ አግኝተዋል። Conic gradients በ2021 በሁሉም evergreen አሳሾች ተተግብረዋል። የin oklch interpolation keyword በChrome 111+፣ Safari 16.2+፣ Firefox 113+ ይደገፋል። ጥንታዊ አሳሾችን መደገፍ ካስፈለገዎት ነባሪ sRGB interpolation ን ይጠቀሙ — የእይታ ልዩነቱ የበለጠ የሚቆጥረው ለhue-jumping ብዙ-ማቆሚያ gradients ነው።

ምንም ነገር ወደ ሰርቨርዎ ይላካል?

አይ። የgradient string ማመንጨት፣ የCSS / Tailwind / JSON serialisation፣ እና የቀጥታ ቅድመ-እይታ ሁሉም በመሣሪያዎ ላይ JavaScript ላይ ይሰራሉ። DevTools → Network ይክፈቱ እና በማንኛውም ሥራ ጊዜ ዜሮ outbound requests ያያሉ። የብራንድ ቀለሞችን፣ ውስጣዊ tokens ይለጥፉ — ምንም ነገር laptop ዎን አይለቅም።