Generator Gradien CSS
Buat gradien CSS linear dan radial. Pilih warna secara visual dan salin CSS yang dihasilkan.
background: linear-gradient(135deg, #535beb, #7c3aed);
Cara menggunakan alat ini
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
Apa itu Generator Gradien CSS?
Gradien CSS adalah transisi warna antara dua warna atau lebih. Gradien linear mengalir dalam satu arah; gradien radial memancar dari sebuah titik. Generator ini mencakup kasus umum; untuk gradien kompleks dengan banyak titik henti dan posisi khusus, buatlah secara manual.
Kasus penggunaan umum
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Pertanyaan yang sering diajukan
Apakah gradien efisien?▼
Bisakah saya menganimasikan gradien?▼
Alat terkait
Konverter Warna (HEX/RGB/HSL)
Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.
Generator Box Shadow CSS
Buat nilai box-shadow CSS secara visual. Pratinjau secara real-time dan salin CSS yang dihasilkan.
Generator Kurva Easing Cubic Bezier
Buat kurva easing cubic-bezier untuk CSS. Termasuk preset standar.
Generator Palet Warna
Hasilkan palet warna yang harmonis dari warna dasar mana pun. Mendukung skema komplementer, analog, triadik, dan monokromatik.
Generator Border Radius CSS
Buat nilai border-radius CSS yang kompleks secara visual. Kontrol independen untuk setiap sudut.
Generator CSS Clamp()
Hasilkan nilai CSS yang fluid dan responsif dengan clamp(). Skalakan dengan mulus antara ukuran minimum dan maksimum di sepanjang rentang viewport.