Alat desain
14 alatPilih warna, buat efek CSS, periksa kontras, dan buat aset visual.
- Pembuat gradien CSSBuat gradien CSS yang indah dengan pratinjau
- Pembuat bayangan kotakBuat properti CSS box-shadow
- Pembuat radius sudutBuat properti CSS border-radius
- Pembuat tanda tanganBuat gambar tanda tangan tulisan tangan dengan 30 jenis huruf atau dengan menggambar
- Pembuat bilah progresDesain bilah progres animasi
- Pembuat tanda airTambahkan tanda air teks atau logo ke gambar untuk perlindungan
- Pemeriksa kontras WCAGPeriksa rasio kontras warna untuk kesesuaian aksesibilitas WCAG AA dan AAA
- Pembuat faviconBuat favicon dari teks, emoji, atau gambar untuk situs web Anda
- Pembuat kolase fotoBuat kolase foto yang indah dengan berbagai tata letak
- Pemilih warna & pembuat paletPilih warna dan buat palet warna
- RGB ke HEX ke HSLKonversi antara format warna RGB, HEX, dan HSL
- Pembuat animasi CSSBuat animasi keyframe CSS dengan editor linimasa visual
- Ruang eksperimen CSS FlexboxRuang eksperimen interaktif untuk mempelajari dan membuat tata letak Flexbox
- Pembuat CSS GridPembuat tata letak CSS Grid visual dengan pembuatan kode
Buat dan periksa detail visual
Buat warna, efek CSS, potongan tata letak, dan aset visual kecil untuk proyek Anda. Pratinjau efek membantu dalam memilih, tetapi hasil akhirnya bergantung pada desain sekitarnya, viewport, dan konten. Periksa kontras dan perilaku responsif, bukan hanya tampilan satu elemen.
Dari pilihan visual menjadi hasil yang siap pakai
Pembuat gradien CSS membuat gaya gradien, Pemilih warna & pembuat palet membantu memilih palet, dan Pemeriksa kontras WCAG membandingkan warna latar depan dan latar belakang. Uji hasilnya dengan ukuran teks dan status yang sebenarnya Anda pakai.
Pertanyaan umum
Apakah rasio kontras yang lolos membuat halaman sepenuhnya aksesibel?
Tidak. Kontras hanyalah satu pemeriksaan. Navigasi keyboard, label, visibilitas fokus, struktur dokumen, dan persyaratan aksesibilitas lainnya juga penting.
Bagaimana cara mengubah pratinjau gradien menjadi gaya situs web?
Pembuat gradien CSS menghasilkan deklarasi gradien. Terapkan pada elemen yang dituju dan uji dengan dimensi, teks, dan latar belakang yang sebenarnya digunakan di halaman.
Bisakah saya membandingkan dua warna sebelum memilihnya untuk teks?
Pemeriksa kontras WCAG menghitung rasio kontras untuk warna latar depan dan latar belakang. Gunakan warna yang sebenarnya dan periksa kriteria yang sesuai dengan ukuran dan ketebalan teks.
Bagaimana cara beralih antara HEX, RGB, dan HSL?
RGB ke HEX ke HSL mengubah notasi nilai warna. Notasi hanya menggambarkan warna; ia tidak otomatis menghasilkan palet atau menjamin kontras yang baik.