CSS Gradient Generator

Apa Itu CSS Gradient?

CSS gradient generator adalah alat visual yang membantu Andamembuat transisi warna yang halus tanpa harus menulis sintaks gradient secara manual. Dalam CSS, gradient adalah transisi mulus antara dua warna atau lebih, yang dirender langsung oleh browser tanpa memerlukan file gambar. Spesifikasi CSS Image Module Level 4 mendefinisikan fungsi gradient sebagai jenis nilai gambar, artinya fungsi ini dapat digunakan di mana saja nilai background-image, list-style-image, atau border-image diterima. Karena browser melakukan rasterisasi gradient saat render, gradient dapat diskalakan ke resolusi apa pun dan tidak menghasilkan artefak buram di layar high-DPI. Menggunakan CSS gradient generator menghemat waktu dan mengurangi tebak-tebakan — Andamenyesuaikan warna dan posisi secara visual, lalu menyalin aturan CSS yang sudah jadi.

CSS mendukung tiga bentuk gradient utama: linear (sepanjang garis lurus), radial (menyebar dari titik tengah), dan conic (melingkar di sekitar titik tengah). Setiap bentuk menerima daftar color stops, di mana Andamenentukan warna dan secara opsional posisinya (persentase atau panjang). Browser menginterpolasi warna antar stop menggunakan ruang warna sRGB secara default, meskipun CSS Color Level 4 memungkinkan penentuan ruang warna lain seperti oklch dan lab untuk transisi yang lebih halus secara perseptual.

Gradient menggantikan latar belakang berbasis gambar untuk sebagian besar keperluan dekoratif di web. Satu aturan CSS menghasilkan apa yang dulu memerlukan ekspor Photoshop dan satu HTTP request. Gradient bersifat resolution-independent, tidak memerlukan bandwidth jaringan di luar CSS itu sendiri, dan dapat dianimasikan atau ditransisikan dengan properti CSS standar. Sintaks gradient telah stabil di semua browser utama sejak 2013, dan bentuk tanpa prefiks bekerja di Chrome, Firefox, Safari, dan Edge tanpa fallback.

Mengapa Menggunakan CSS Gradient Generator Ini?

Menulis sintaks gradient secara manual berarti menebak posisi stop, memeriksa nilai sudut, dan berkali-kali me-refresh untuk melihat hasilnya. Pembuat visual memungkinkan Andamelihat gradient seiring membuatnya, menyesuaikan stop dengan cara drag, dan menyalin CSS akhir saat tampilannya sudah sesuai.

Kasus Penggunaan CSS Gradient Generator

Referensi Tipe Gradient CSS

CSS mendefinisikan lima fungsi gradient. Tiga tipe utama (linear, radial, conic) masing-masing memiliki varian repeating yang mengulangi pola. repeating-linear-gradient() dan repeating-radial-gradient() berguna untuk latar belakang bergaris dan cincin konsentris. Semua fungsi gradient menerima color stops dalam format warna CSS apa pun: HEX, RGB, HSL, named colors, atau oklch. Dukungan browser untuk kelima fungsi ini secara efektif universal di Chrome, Firefox, Safari, dan Edge — tidak diperlukan vendor prefix.

Gradient Linear vs Radial vs Conic

Setiap tipe gradient memetakan warna ke geometri dengan cara berbeda. Memilih tipe yang tepat bergantung pada efek visual yang Andabutuhkan, bukan pada perbedaan kualitas di antara keduanya. Untuk sebagian besar latar belakang halaman dan pemisah bagian, gradient linear adalah pilihan default yang tepat — paling mudah dipahami dan paling dapat diprediksi pada elemen dengan berbagai ukuran. Gradient radial dan conic lebih baik digunakan untuk efek visual tertentu di mana geometri melingkar atau rotasional bermakna, bukan sekadar dekoratif.

Contoh Kode

Contoh pembuatan dan penerapan gradient CSS secara programatik dalam JavaScript, Python, CSS, dan Go. Masing-masing menghasilkan string gradient CSS yang valid dan dapat digunakan langsung di stylesheet atau inline styles.

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

Pertanyaan yang Sering Diajukan