CSS গ্রেডিয়েন্ট জেনারেটর

CSS গ্রেডিয়েন্ট কী?

CSS গ্রেডিয়েন্ট জেনারেটর একটি ভিজ্যুয়াল টুল যা আপনাকে হাতে গ্রেডিয়েন্ট সিনট্যাক্স না লিখেই মসৃণ রঙ পরিবর্তন তৈরি করতে সাহায্য করে। CSS-এ গ্রেডিয়েন্ট হলো দুটি বা তার বেশি রঙের মধ্যে একটি মসৃণ পরিবর্তন, যা ব্রাউজার সরাসরি রেন্ডার করে কোনো ছবির ফাইল ছাড়াই। CSS Image Module Level 4 স্পেসিফিকেশন গ্রেডিয়েন্ট ফাংশনগুলোকে একটি ইমেজ ভ্যালু হিসেবে সংজ্ঞায়িত করে, অর্থাৎ এগুলো background-image, list-style-image বা border-image যেখানেই ব্যবহার করা যায়। ব্রাউজার রেন্ডারের সময় গ্রেডিয়েন্ট রাস্টারাইজ করে বলে এগুলো যেকোনো রেজোলিউশনে স্কেল হয় এবং হাই-DPI স্ক্রিনে ঘোলাটে দেখায় না। CSS গ্রেডিয়েন্ট জেনারেটর ব্যবহার করলে সময় বাঁচে এবং অনুমানের প্রয়োজন কমে — আপনি দৃশ্যমানভাবে রঙ ও অবস্থান সামঞ্জস্য করুন, তারপর তৈরি CSS নিয়ম কপি করুন।

CSS তিনটি মূল গ্রেডিয়েন্ট আকার সমর্থন করে: রৈখিক (সরল রেখা বরাবর), বৃত্তাকার (কেন্দ্র বিন্দু থেকে বাইরের দিকে) এবং কোনিক (কেন্দ্র বিন্দুর চারপাশে ঘূর্ণন)। প্রতিটি আকার রঙের থামার একটি তালিকা গ্রহণ করে, যেখানে আপনি রঙ এবং ঐচ্ছিকভাবে একটি অবস্থান (শতাংশ বা দৈর্ঘ্য) নির্দিষ্ট করেন। ব্রাউজার ডিফল্টভাবে sRGB রঙ স্থানে থামার মধ্যে রঙ প্রক্ষেপণ করে, যদিও CSS Color Level 4 oklch এবং lab-এর মতো অন্যান্য রঙ স্থান নির্দিষ্ট করার অনুমতি দেয় যা অনুভূতিগতভাবে আরও মসৃণ পরিবর্তনের জন্য।

গ্রেডিয়েন্ট ওয়েবে বেশিরভাগ আলংকারিক উদ্দেশ্যে ছবি-ভিত্তিক ব্যাকগ্রাউন্ড প্রতিস্থাপন করে। একটি CSS নিয়ম যা এক সময় Photoshop এক্সপোর্ট এবং HTTP অনুরোধের প্রয়োজন ছিল তা এখন সেটাই করে। এগুলো রেজোলিউশন-নিরপেক্ষ, CSS ছাড়া কোনো নেটওয়ার্ক ব্যান্ডউইথ খরচ করে না এবং স্ট্যান্ডার্ড CSS বৈশিষ্ট্য দিয়ে অ্যানিমেট বা পরিবর্তন করা যায়। গ্রেডিয়েন্ট সিনট্যাক্স ২০১৩ সাল থেকে সমস্ত প্রধান ব্রাউজারে স্থিতিশীল, এবং প্রিফিক্সহীন রূপটি 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 জুড়ে সমস্ত পাঁচটি ফাংশনের ব্রাউজার সমর্থন কার্যত সর্বজনীন — কোনো ভেন্ডার প্রিফিক্সের প্রয়োজন নেই।

Linear বনাম Radial বনাম Conic গ্রেডিয়েন্ট

প্রতিটি গ্রেডিয়েন্ট প্রকার ভিন্নভাবে রঙকে জ্যামিতিতে ম্যাপ করে। সঠিক প্রকার বেছে নেওয়া নির্ভর করে আপনার প্রয়োজনীয় দৃশ্যমান প্রভাবের উপর, তাদের মধ্যে কোনো গুণমানের পার্থক্যের উপর নয়। বেশিরভাগ পেজের ব্যাকগ্রাউন্ড ও সেকশন বিভাজকের জন্য রৈখিক গ্রেডিয়েন্টই সঠিক ডিফল্ট — এটি বোঝা সবচেয়ে সহজ এবং বিভিন্ন আকারের উপাদানে সবচেয়ে পূর্বানুমানযোগ্য। বৃত্তাকার ও কোনিক গ্রেডিয়েন্ট নির্দিষ্ট ভিজ্যুয়াল প্রভাবের জন্য সংরক্ষিত রাখা ভালো যেখানে বৃত্তাকার বা ঘূর্ণনমূলক জ্যামিতি অর্থবহ।

কোড উদাহরণ

JavaScript, Python, CSS এবং Go-তে প্রোগ্রামগতভাবে CSS গ্রেডিয়েন্ট তৈরি ও প্রয়োগের উদাহরণ। প্রতিটি বৈধ 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%)"
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন