تولیدکننده گرادیان CSS

گرادیان CSS چیست؟

تولیدکننده گرادیان CSS ابزاری بصری است که به شما کمک می‌کند انتقال‌های رنگی روان را بدون نوشتن دستی سینتکس گرادیان بسازید. در CSS، گرادیان یک انتقال روان بین دو یا چند رنگ است که مستقیماً توسط مرورگر و بدون هیچ فایل تصویری رندر می‌شود. مشخصه CSS Image Module Level 4 توابع گرادیان را به عنوان نوعی مقدار تصویری تعریف می‌کند، یعنی می‌توانند در هر جایی که مقادیر background-image، list-style-image یا border-image پذیرفته می‌شوند، استفاده شوند. از آنجا که مرورگر گرادیان‌ها را در زمان رندر شطرنجی می‌کند، به هر رزولوشنی مقیاس می‌یابند و هرگز روی صفحه‌های high-DPI تاری ایجاد نمی‌کنند. استفاده از تولیدکننده گرادیان CSS در زمان صرفه‌جویی می‌کند و حدس و گمان را کاهش می‌دهد — رنگ‌ها و موقعیت‌ها را به‌صورت بصری تنظیم می‌کنید، سپس قانون نهایی CSS را کپی می‌کنید.

CSS از سه شکل اصلی گرادیان پشتیبانی می‌کند: linear (در امتداد یک خط مستقیم)، radial (از یک نقطه مرکزی به بیرون)، و conic (چرخش دور یک نقطه مرکزی). هر شکل فهرستی از نقاط رنگ می‌پذیرد که در آن رنگ و به‌صورت اختیاری موقعیت (درصد یا طول) را تعیین می‌کنید. مرورگر به‌طور پیش‌فرض با استفاده از فضای رنگی sRGB بین نقاط درون‌یابی می‌کند، هرچند CSS Color Level 4 اجازه می‌دهد فضاهای رنگی دیگری مانند oklch و lab برای انتقال‌های از نظر ادراکی روان‌تر تعیین شوند.

گرادیان‌ها پس‌زمینه‌های مبتنی بر تصویر را برای اکثر اهداف تزئینی در وب جایگزین کرده‌اند. یک قانون CSS تنها چیزی تولید می‌کند که زمانی نیازمند خروجی Photoshop و یک درخواست HTTP بود. آن‌ها مستقل از رزولوشن هستند، هیچ پهنای باند شبکه‌ای فراتر از خود CSS نیاز ندارند و می‌توانند با ویژگی‌های استاندارد CSS متحرک شوند یا انتقال یابند. سینتکس گرادیان از سال ۲۰۱۳ در تمام مرورگرهای اصلی پایدار بوده و فرم بدون پیشوند در Chrome، Firefox، Safari و Edge بدون نیاز به fallback کار می‌کند.

چرا از این تولیدکننده گرادیان CSS استفاده کنیم؟

نوشتن دستی سینتکس گرادیان یعنی حدس زدن موقعیت نقاط، بررسی مقادیر زاویه و بارگذاری مکرر صفحه برای مشاهده نتیجه. یک سازنده بصری به شما اجازه می‌دهد گرادیان را در حین ساختن ببینید، نقاط را با کشیدن تنظیم کنید و پس از درست به نظر رسیدن، CSS نهایی را کپی کنید.

موارد استفاده از تولیدکننده گرادیان CSS

مرجع انواع گرادیان CSS

CSS پنج تابع گرادیان تعریف می‌کند. سه نوع اصلی (linear، radial، conic) هر کدام یک نوع تکراری دارند که الگو را کاشی می‌کنند. repeating-linear-gradient() و repeating-radial-gradient() برای پس‌زمینه‌های راه‌راه و حلقه‌های متحدالمرکز مفید هستند. تمام توابع گرادیان نقاط رنگ را در هر قالب رنگ CSS می‌پذیرند: HEX، RGB، HSL، رنگ‌های نام‌دار، یا oklch. پشتیبانی مرورگر از هر پنج تابع در Chrome، Firefox، Safari و Edge عملاً جهانی است — هیچ پیشوند vendor لازم نیست.

مقایسه گرادیان‌های Linear، Radial و Conic

هر نوع گرادیان رنگ‌ها را به شکل متفاوتی روی فضا پخش می‌کند. انتخاب نوع مناسب به جلوه بصری مورد نیاز شما بستگی دارد، نه به تفاوت کیفیت بین آن‌ها. برای اکثر پس‌زمینه‌های صفحه و جداکننده‌های بخش، گرادیان linear پیش‌فرض صحیح است — ساده‌ترین برای درک و پیش‌بینی‌پذیرترین در عناصر با اندازه‌های متفاوت است. گرادیان‌های radial و conic بهتر است برای جلوه‌های بصری خاص که هندسه دایره‌ای یا چرخشی معنادار است نه تزئینی رزرو شوند.

نمونه‌های کد

نمونه‌هایی از تولید و اعمال گرادیان‌های CSS به‌صورت برنامه‌نویسی در JavaScript، Python، CSS و Go. هر کدام رشته‌های گرادیان CSS معتبری تولید می‌کنند که می‌توانید مستقیماً در stylesheet‌ها یا استایل‌های inline استفاده کنید.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

سؤالات متداول