Pustaka Latar Gradien
Jelajahi lebih dari 110 latar gradien CSS pilihan yang diatur berdasarkan gaya: senja, samudra, hutan, api, ungu, pastel, gelap, neon, minimalis, hangat, dan sejuk. Klik gradien mana pun untuk menyalin nilai CSS latar siap pakai seketika. Gratis, tanpa pendaftaran.
Showing 110 of 110 gradients
Golden Hour
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunset Blaze
linear-gradient(135deg, #f83600 0%, #f9d42…
Dusk
linear-gradient(135deg, #fc4a1a 0%, #f7b73…
Amber Glow
linear-gradient(135deg, #f7971e 0%, #ffd20…
Horizon
linear-gradient(135deg, #ff6e7f 0%, #bfe9f…
Twilight
linear-gradient(135deg, #ee0979 0%, #ff6a0…
Peach Fuzz
linear-gradient(135deg, #ffb347 0%, #ffcc3…
Coral Reef
linear-gradient(135deg, #ff9a9e 0%, #fad0c…
Deep Sea
linear-gradient(135deg, #0f2027 0%, #203a4…
Aqua Splash
linear-gradient(135deg, #13547a 0%, #80d0c…
Tidal Wave
linear-gradient(135deg, #1a6dff 0%, #00d2f…
Lagoon
linear-gradient(135deg, #43c6ac 0%, #19165…
Seafoam
linear-gradient(135deg, #a8edea 0%, #fed6e…
Pacific
linear-gradient(135deg, #005c97 0%, #36379…
Maldives
linear-gradient(135deg, #00b4db 0%, #0083b…
Bali Blue
linear-gradient(135deg, #56ccf2 0%, #2f80e…
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7…
Jungle
linear-gradient(135deg, #134e5e 0%, #71b28…
Moss
linear-gradient(135deg, #56ab2f 0%, #a8e06…
Rainforest
linear-gradient(135deg, #1d976c 0%, #93f9b…
Sage
linear-gradient(135deg, #b2d8b2 0%, #e8f5e…
Pine
linear-gradient(135deg, #2d6a4f 0%, #52b78…
Fern
linear-gradient(135deg, #74b49b 0%, #a7c5b…
Canopy
linear-gradient(135deg, #093028 0%, #237a5…
Inferno
linear-gradient(135deg, #f12711 0%, #f5af1…
Lava
linear-gradient(135deg, #200122 0%, #6f000…
Ember
linear-gradient(135deg, #eb5757 0%, #00000…
Phoenix
linear-gradient(135deg, #f7971e 0%, #e52d2…
Volcano
linear-gradient(135deg, #870000 0%, #190a0…
Wildfire
linear-gradient(135deg, #ff416c 0%, #ff4b2…
Torch
linear-gradient(135deg, #f46b45 0%, #eea84…
Magma
linear-gradient(135deg, #c94b4b 0%, #4b134…
Amethyst
linear-gradient(135deg, #9d50bb 0%, #6e48a…
Cosmic
linear-gradient(135deg, #20002c 0%, #cbb4d…
Lavender
linear-gradient(135deg, #e0c3fc 0%, #8ec5f…
Nebula
linear-gradient(135deg, #a18cd1 0%, #fbc2e…
Ultraviolet
linear-gradient(135deg, #4776e6 0%, #8e54e…
Plum
linear-gradient(135deg, #4b0082 0%, #9400d…
Orchid
linear-gradient(135deg, #da22ff 0%, #9733e…
Violet Haze
linear-gradient(135deg, #c471f5 0%, #fa71c…
Cotton Candy
linear-gradient(135deg, #ffecd2 0%, #fcb69…
Baby Blue
linear-gradient(135deg, #a1c4fd 0%, #c2e9f…
Blush
linear-gradient(135deg, #fbc2eb 0%, #a6c1e…
Mint Cream
linear-gradient(135deg, #d4fc79 0%, #96e6a…
Peach Sorbet
linear-gradient(135deg, #ffeaa7 0%, #fab1a…
Lilac
linear-gradient(135deg, #e0c3fc 0%, #d4a5f…
Powder Pink
linear-gradient(135deg, #ffd1dc 0%, #ffb3c…
Sky Mist
linear-gradient(135deg, #e0f7fa 0%, #b2ebf…
Midnight
linear-gradient(135deg, #0f0c29 0%, #302b6…
Obsidian
linear-gradient(135deg, #1a1a2e 0%, #16213…
Charcoal
linear-gradient(135deg, #232526 0%, #41434…
Void
linear-gradient(135deg, #000000 0%, #43434…
Abyss
linear-gradient(135deg, #000000 0%, #0f202…
Shadow
linear-gradient(135deg, #2c3e50 0%, #4ca1a…
Onyx
linear-gradient(135deg, #1a1a1a 0%, #2d2d2…
Eclipse
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Neon Pulse
linear-gradient(135deg, #00f260 0%, #0575e…
Electric
linear-gradient(135deg, #00c6ff 0%, #0072f…
Cyber
linear-gradient(135deg, #f953c6 0%, #b91d7…
Acid
linear-gradient(135deg, #b3ff00 0%, #00ff8…
Plasma
linear-gradient(135deg, #ff00cc 0%, #33339…
Laser
linear-gradient(135deg, #ff0099 0%, #49324…
Glitch
linear-gradient(135deg, #00ffff 0%, #ff00f…
Synthwave
linear-gradient(135deg, #fc00ff 0%, #00dbd…
Snow
linear-gradient(135deg, #e0e0e0 0%, #fffff…
Fog
linear-gradient(135deg, #d7d2cc 0%, #30435…
Ash
linear-gradient(135deg, #b8c6db 0%, #f5f7f…
Parchment
linear-gradient(135deg, #f5f0e8 0%, #e8dcc…
Linen
linear-gradient(135deg, #f5f5f0 0%, #e8e8e…
Slate
linear-gradient(135deg, #f8f9fa 0%, #e9ece…
Mist
linear-gradient(135deg, #f0f4f8 0%, #d9e2e…
Pearl
linear-gradient(135deg, #fdfbfb 0%, #ebede…
Honey
linear-gradient(135deg, #f6d365 0%, #fda08…
Caramel
linear-gradient(135deg, #d4a574 0%, #f4e4c…
Terracotta
linear-gradient(135deg, #c0392b 0%, #e67e2…
Autumn
linear-gradient(135deg, #d35400 0%, #f39c1…
Cinnamon
linear-gradient(135deg, #8b4513 0%, #d2691…
Saffron
linear-gradient(135deg, #f7971e 0%, #ffd20…
Maple
linear-gradient(135deg, #c94b4b 0%, #e67e2…
Butterscotch
linear-gradient(135deg, #f9d423 0%, #ff4e5…
Arctic
linear-gradient(135deg, #e8f4f8 0%, #a8d8e…
Glacier
linear-gradient(135deg, #b2d8d8 0%, #66a6f…
Steel
linear-gradient(135deg, #4b6cb7 0%, #18284…
Sapphire
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Frost
linear-gradient(135deg, #cfd9df 0%, #e2ebf…
Cerulean
linear-gradient(135deg, #2980b9 0%, #6dd5f…
Cobalt
linear-gradient(135deg, #0052d4 0%, #4364f…
Teal Dream
linear-gradient(135deg, #00b09b 0%, #96c93…
Aurora
linear-gradient(135deg, #00c9ff 0%, #92fe9…
Rainbow
linear-gradient(135deg, #ff0000 0%, #ff770…
Prism
linear-gradient(135deg, #f093fb 0%, #f5576…
Candy
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunrise
linear-gradient(135deg, #f8b500 0%, #ff6b6…
Galaxy
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Opal
linear-gradient(135deg, #a8edea 0%, #fed6e…
Holographic
linear-gradient(135deg, #f093fb 0%, #f5576…
Denim
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Rosewood
linear-gradient(135deg, #ad5389 0%, #3c105…
Citrus
linear-gradient(135deg, #f7971e 0%, #ffd20…
Watermelon
linear-gradient(135deg, #ff6b6b 0%, #feca5…
Bubblegum
linear-gradient(135deg, #ff9a9e 0%, #fecfe…
Moonrise
linear-gradient(135deg, #3a1c71 0%, #d76d7…
Tropics
linear-gradient(135deg, #1fa2ff 0%, #12d8f…
Velvet
linear-gradient(135deg, #4a0072 0%, #7b1fa…
Champagne
linear-gradient(135deg, #f7e7ce 0%, #d4a96…
Midnight Blue
linear-gradient(135deg, #2c3e50 0%, #3498d…
Tangerine
linear-gradient(135deg, #f7971e 0%, #ff6b6…
Spearmint
linear-gradient(135deg, #1d976c 0%, #93f9b…
Dusty Rose
linear-gradient(135deg, #d4a5a5 0%, #f7d6d…
Indigo Night
linear-gradient(135deg, #1a1a2e 0%, #16213…
Mengapa memakai pustaka latar gradien kami?
- Salin instan sekali klik: klik « Salin CSS » pada kartu gradien mana pun dan properti CSS background yang siap pakai langsung tersalin ke papan klip — tempelkan langsung ke lembar gaya, konfigurasi Tailwind, atau alat desain Anda.
- Filter & pencarian menurut gaya: jelajahi lebih dari 110 gradien berdasarkan kategori (senja, samudra, hutan, api, ungu, pastel, gelap, neon, minimalis, hangat, dan sejuk) atau cari berdasarkan nama, warna, atau kata kunci gaya untuk menemukan latar gradien yang tepat seketika.
- Keluaran CSS siap produksi: setiap latar gradien di pustaka adalah nilai CSS valid dengan sintaks standar linear-gradient(). Salin dan tempel langsung ke berkas CSS mana pun, CSS-in-JS, Tailwind, atau style inline — tanpa modifikasi.
- 100 % gratis — tanpa pendaftaran: pustaka latar gradien sepenuhnya gratis, tanpa akun, tanpa pendaftaran, dan tanpa batas penggunaan. Semua gradien bebas untuk penggunaan pribadi dan komersial. Jelajahi, salin, dan terapkan — tanpa syarat.
Kasus penggunaan umum pustaka latar gradien
- Latar hero & landing page: terapkan latar gradien ke seksi hero, banner CTA, atau tata letak seluruh halaman dalam hitungan detik. Pustaka ini memberi CSS siap produksi yang dapat langsung Anda tempel ke lembar gaya tanpa alat tambahan.
- Kartu UI & pembatas seksi: gunakan latar gradien untuk memisahkan seksi secara visual, menyorot kartu fitur, atau memberi kedalaman pada tabel harga. Jelajahi pustaka berdasarkan gaya: minimalis untuk pembatas halus, neon untuk sorotan tebal.
- Mockup Figma & alat desain: salin nilai CSS latar gradien mana pun dan tempel langsung ke Figma, Sketch, atau Adobe XD sebagai isian. Pustaka ini menghemat waktu karena Anda tidak perlu membuat ulang gradien secara manual.
- Grafis media sosial & pemasaran: buat latar unggahan media sosial, thumbnail YouTube, dan banner header email yang menarik dengan gradien dari pustaka. Kategori senja, neon, dan samudra sangat populer untuk visual pemasaran.
- Splash screen aplikasi mobile & PWA: gunakan latar gradien dari pustaka untuk splash screen, slide onboarding, dan status memuat. Kategori gelap dan minimalis sangat cocok untuk pola desain UI mobile modern.
- Presentasi & slide: terapkan latar gradien pada slide di Google Slides, PowerPoint, atau Keynote. Pustaka ini mencakup semua suasana — dari gradien minimalis profesional hingga gaya neon dan senja yang cerah.
Apa itu latar gradien CSS?
Latar gradien CSS adalah transisi halus antara dua warna atau lebih yang dirender sepenuhnya oleh peramban, tanpa perlu berkas gambar. Pustaka latar gradien memakai fungsi standar linear-gradient() CSS, yang didukung semua peramban modern. Karena gradien dihasilkan oleh CSS, gradien bersifat tak terbatas skalanya, dimuat seketika, dan tidak menambah satu byte pun pada beban gambar Anda — menjadikannya ideal untuk desain web yang memperhatikan performa.
Cara memakai pustaka latar gradien
- Jelajahi atau cari: gunakan tombol filter kategori (senja, samudra, neon, dll.) atau bilah pencarian untuk menemukan latar gradien yang cocok dengan desain Anda.
- Salin CSS: klik tombol « Salin CSS » pada kartu gradien mana pun. Deklarasi lengkap background: linear-gradient(…); langsung tersalin ke papan klip.
- Tempel dan terapkan: tempel CSS latar gradien langsung ke lembar gaya, prop style Tailwind, CSS-in-JS, atau alat desain Anda. Tidak perlu modifikasi — langsung berfungsi.
Seperti apa keluaran CSS-nya
- Arah: semua gradien memakai 135deg (diagonal kiri atas ke kanan bawah) secara bawaan — sudut yang umumnya enak dilihat. Anda dapat mengubah sudutnya di CSS Anda sendiri setelah menyalin.
- Perhentian warna: sebagian besar gradien memakai 2-3 perhentian yang didefinisikan sebagai nilai HEX. Gradien multi-perhentian (seperti Rainbow dan Holographic) memakai hingga 7 perhentian untuk transisi yang lebih kaya.
- Sintaks: keluaran memakai linear-gradient() standar — kompatibel dengan semua peramban modern dan pra-pemroses CSS (Sass, Less, PostCSS).
- Kustomisasi: setelah menyalin, Anda dapat menyesuaikan sudut, menambah perhentian warna, atau memadukannya dengan background-size dan background-position untuk efek gradien beranimasi.
Kategori pustaka latar gradien dijelaskan
Pustaka latar gradien diatur menjadi 11 kategori gaya untuk membantu Anda menemukan suasana yang tepat dengan cepat. Gradien senja dan hangat memakai oranye, kuning, dan merah muda — ideal untuk desain yang energik dan ramah. Gradien samudra dan sejuk memakai biru dan toska — cocok untuk UI profesional dan berfokus teknologi. Gradien gelap cocok untuk antarmuka mode gelap dan seksi hero yang dramatis. Gradien neon berkontras tinggi dan cerah — sempurna untuk gaming, hiburan, dan pemasaran yang berani. Gradien minimalis halus dan netral — ideal untuk latar yang tidak boleh bersaing dengan konten.
Pertanyaan yang Sering Diajukan
Pustaka latar gradien adalah kumpulan latar gradien CSS pilihan yang dapat Anda jelajahi dan salin dengan sekali klik. Pustaka ini memuat lebih dari 110 nilai linear-gradient() pilihan yang diatur berdasarkan gaya (senja, samudra, hutan, api, ungu, pastel, gelap, neon, minimalis, hangat, dan sejuk), semuanya siap ditempel langsung ke CSS Anda.
Klik tombol « Salin CSS » pada kartu gradien mana pun. Deklarasi CSS latar lengkapnya disalin ke papan klip. Tempelkan ke lembar gaya Anda, prop style Tailwind, CSS-in-JS, atau alat desain. Tidak perlu modifikasi apa pun.
Boleh. Semua gradien di pustaka ini memakai sintaks standar linear-gradient() CSS dengan nilai warna. Anda dapat memakai gradien mana pun secara bebas di proyek pribadi maupun komersial tanpa atribusi.
Tentu. Semua gradien memakai 135deg (diagonal) secara bawaan. Untuk mengubah arah, ganti 135deg dengan sudut apa pun: 0deg untuk atas ke bawah, 90deg untuk kiri ke kanan, atau sudut lain. Sisa CSS gradien tetap sama.
CSS linear-gradient() tidak dapat dianimasikan secara langsung. Teknik paling umum adalah memakai background-size: 200% 200% dan menganimasikan background-position dengan aturan @keyframes CSS. CSS gradien dari pustaka ini menjadi titik awal untuk teknik animasi apa pun.
Bisa. Gunakan CSS yang disalin sebagai prop style inline, atau tambahkan ke tailwind.config.js Anda di theme.extend.backgroundImage. Tailwind v3+ juga mendukung nilai arbitrer: bg-[linear-gradient(135deg,_#f6d365,_#fda085)].
Sepenuhnya. Pustaka latar gradien adalah alat referensi statis: tidak ada input pengguna, unggahan berkas, atau pemrosesan data. Semua berjalan lokal di peramban Anda. Tidak ada data yang dikirim ke server mana pun.
Salin gradien mana pun dari pustaka dan terapkan ke elemen Anda: .elemen-saya { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }. Untuk latar seluruh halaman, terapkan ke elemen body atau html.
Bisa. CSS mendukung beberapa lapisan latar yang dipisahkan koma. Gunakan warna rgba() dengan transparansi pada gradien pertama untuk memadukannya di atas gradien kedua: background: linear-gradient(135deg, rgba(246,211,101,0.8), rgba(253,160,133,0.8)), linear-gradient(45deg, #667eea, #764ba2);