مولّد تدرجات CSS

ما هو تدرج CSS؟

مولّد تدرجات CSS هو أداة بصرية تساعدك على بناء انتقالات لونية سلسة دون الحاجة إلى كتابة صياغة التدرج يدويًا. في CSS، التدرج هو انتقال سلس بين لونين أو أكثر، يُصيَّر مباشرةً بواسطة المتصفح دون أي ملف صورة. تُعرِّف مواصفة CSS Image Module Level 4 دوال التدرج باعتبارها نوعًا من قيم الصور، مما يعني أنها تُقبَل في أي مكان يصح فيه استخدام قيم background-image أو list-style-image أو border-image. ولأن المتصفح يُنقِّط التدرجات أثناء التصيير، فإنها تتوسع لأي دقة دون إنتاج أي تشويه ضبابي على الشاشات عالية الكثافة. يوفر استخدام مولّد تدرجات CSS الوقت ويُقلل من التخمين — فأنت تضبط الألوان والمواضع بصريًا، ثم تنسخ قاعدة CSS الجاهزة.

يدعم CSS ثلاثة أشكال رئيسية للتدرج: الخطي (على طول خط مستقيم)، والدائري (خارجًا من نقطة مركزية)، والمخروطي (دورانًا حول نقطة مركزية). يقبل كل شكل قائمة من نقاط الألوان، حيث تحدد اللون وموضعه اختياريًا (نسبة مئوية أو طول). يتولى المتصفح تدرج الألوان بين النقاط باستخدام فضاء الألوان sRGB افتراضيًا، وإن كان CSS Color Level 4 يتيح تحديد فضاءات ألوان أخرى كـ oklch وlab للحصول على انتقالات أكثر سلاسةً إدراكيًا.

تحلّ التدرجات محل الخلفيات المعتمدة على الصور لمعظم الأغراض الزخرفية على الويب. قاعدة CSS واحدة تُنتج ما كان يتطلب سابقًا تصديرًا من Photoshop وطلب HTTP. وهي مستقلة عن الدقة، ولا تتطلب أي حيّز نطاق شبكي إضافيًا عدا ملف CSS نفسه، ويمكن تحريكها أو إخضاعها للانتقالات باستخدام خصائص CSS القياسية. ظلت صياغة التدرج ثابتةً عبر جميع المتصفحات الرئيسية منذ عام 2013، وتعمل الصياغة الخالية من بادئات المورِّد في Chrome وFirefox وSafari وEdge دون الحاجة إلى بدائل.

لماذا تستخدم مولّد تدرجات CSS هذا؟

كتابة صياغة التدرج يدويًا تعني التخمين في مواضع النقاط، والتحقق من قيم الزوايا، وتحديث الصفحة مرارًا لرؤية النتيجة. أداة البناء البصرية تتيح لك رؤية التدرج أثناء بنائه، وضبط النقاط بالسحب، ونسخ CSS النهائي عند اكتمال المظهر.

حالات استخدام مولّد تدرجات CSS

مرجع أنواع تدرجات CSS

يُعرِّف CSS خمس دوال للتدرج. الأنواع الثلاثة الرئيسية (linear وradial وconic) لكل منها متغيّر متكرر يُبلّط النمط. تُفيد repeating-linear-gradient() وrepeating-radial-gradient() في إنشاء خلفيات مخططة وحلقات متحدة المركز. تقبل جميع دوال التدرج نقاط ألوان بأي تنسيق لوني لـ CSS: HEX وRGB وHSL والألوان المسماة أو oklch. دعم المتصفح للدوال الخمس فعليًا شاملٌ عبر Chrome وFirefox وSafari وEdge، ولا تلزم بادئات المورِّد.

مقارنة: التدرج الخطي مقابل الدائري مقابل المخروطي

يُعيِّن كل نوع من أنواع التدرج الألوانَ على الأشكال الهندسية بطريقة مختلفة. يعتمد اختيار النوع المناسب على التأثير البصري المطلوب لا على فارق جودة بينها. لمعظم خلفيات الصفحات وفواصل الأقسام، يُعدّ التدرج الخطي الخيار الأمثل — فهو الأبسط في الفهم والأكثر قدرةً على التنبؤ عبر العناصر ذات الأحجام المتباينة. يُفضَّل الاحتفاظ بالتدرجين الدائري والمخروطي للتأثيرات البصرية المحددة التي تكون فيها الهندسة الدائرية أو الدورانية ذات معنى لا مجرد زخرفة.

أمثلة برمجية

أمثلة على توليد تدرجات CSS وتطبيقها برمجيًا في JavaScript وPython وCSS وGo. كل مثال ينتج سلاسل تدرج CSS صالحة يمكنك استخدامها مباشرةً في أوراق الأنماط أو الأنماط المضمّنة.

// 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%)"
}

الأسئلة الشائعة