ຕົວສ້າງ CSS Gradient

ພຽງແຕ່ເລືອກສີແລະມຸມ ກໍ່ສາມາດສ້າງລະຫັດ CSS Gradient ພ້ອມເບິ່ງຕົວຢ່າງໄດ້ທັນທີ

ຂໍ້ມູນອັບເດດເພີ່ມເຄື່ອງມືສ້າງ CSS Gradient, ເລືອກສີ ແລະ ມູມເພື່ອສ້າງໂຄດເບິ່ງຂໍ້ມູນການອັບເດດ

ຄຸນສົມບັດ

ຕົວຢ່າງແລະລະຫັດອັບເດດພ້ອມກັນ

ທຸກຄັ້ງທີ່ປ່ຽນສີຫຼືມຸມ ຮູບແບບແລະ CSS ຈະປ່ຽນແປງພ້ອມກັນ

ຮອງຮັບ linear, radial ແລະ conic

ກຳນົດມຸມ, ຮູບຮ່າງ, ແລະຕຳແໜ່ງຈຸດກາງໄດ້ລະອຽດຕາມແຕ່ລະປະເພດ

ປັບສີສູງສຸດ 10 ສີດ້ວຍການລາກ

ປັບຕຳແໜ່ງສີດ້ວຍການລາກເທິງແຖບ, ປັບຄວາມໂປ່ງໃສດ້ວຍແຖບເລື່ອນ

ຕົວຢ່າງ 8 ແບບແລະການສ້າງແບບສຸ່ມ

ປັບແຕ່ງລະອຽດຈາກຊຸດສີມາດຕະຖານຫຼືຊຸດສີແບບສຸ່ມ

ວິທີໃຊ້

ເລືອກປະເພດ

ເລືອກປະເພດ gradient ຈາກ linear, radial ຫຼື conic

ກຳນົດສີ

ເລືອກສີດ້ວຍລະຫັດສີຫຼືຕົວຢ່າງ, ກົດ "ເພີ່ມສີ" ເພື່ອເພີ່ມສີແລ້ວປັບຕຳແໜ່ງແລະຄວາມໂປ່ງໃສ

ປັບທິດທາງ

ສຳລັບ linear ໃຫ້ກຳນົດມຸມຫຼືປຸ່ມທິດທາງ, ສຳລັບ radial ແລະ conic ໃຫ້ກຳນົດຕຳແໜ່ງຈຸດກາງ

ຄັດລອກລະຫັດ

ກົດປຸ່ມ "ຄັດລອກ" ເພື່ອນຳ CSS ແຖວດຽວໄປໃສ່ໃນ style ຂອງທ່ານ

ກໍລະນີໃຊ້ງານ

ສ້າງພື້ນຫຼັງຮູບ Hero

ກຳນົດສີພື້ນຫຼັງຂອງໜ້າຫຼັກຫຼືປຸ່ມຂອງເວັບໄຊໂດຍບໍ່ຕ້ອງຂຽນລະຫັດ

ເລືອກຊຸດສີຫົວຂໍ້ Blog

ເລືອກຊຸດສີທີ່ໃກ້ຄຽງຈາກຕົວຢ່າງເພື່ອປັບແຕ່ງພື້ນຫຼັງຫົວຂໍ້ບົດຄວາມ

ຊັ້ນວາງເທິງຮູບພາບ (Overlay)

ສ້າງຊັ້ນວາງເຄິ່ງໂປ່ງໃສເທິງຮູບພາບດ້ວຍສີທີ່ຫຼຸດຄວາມໂປ່ງໃສ

ປັບແຕ່ງ Gradient ຫຼາຍສີ

ລາກປັບຕຳແໜ່ງຈຸດຕໍ່ຂອງສີ 3 ສີຂຶ້ນໄປໃຫ້ໃກ້ກັນເທື່ອລະໜ້ອຍ

ຄວາມຮູ້ພື້ນຖານ

ຄວາມແຕກຕ່າງລະຫວ່າງ linear, radial ແລະ conic

Gradient ໃນ CSS ມີຟັງຊັນ 3 ແບບທີ່ວິທີການປ່ຽນສີແຕກຕ່າງກັນ, ທັງໝົດໃຊ້ຂຽນໃນ property background.

linear-gradient：linear-gradient ແມ່ນ gradient ແບບເສັ້ນຊື່ ທີ່ສີປ່ຽນແປງຕາມເສັ້ນທີ່ກຳນົດມຸມ.
radial-gradient：radial-gradient ແມ່ນ gradient ແບບວົງມົນ ທີ່ສີແຜ່ອອກຈາກຈຸດກາງເປັນຮູບວົງມົນຫຼືຮູບໄຂ່.
conic-gradient：conic-gradient ແມ່ນ gradient ແບບພັດ ທີ່ສີປ່ຽນແປງຕາມການໝຸນຮອບຈຸດກາງຕາມເຂັມໂມງ.

ຄວາມສຳພັນລະຫວ່າງມຸມແລະຄຳສັບທິດທາງ

ມຸມຂອງ linear-gradient, 0deg ແມ່ນທິດຈາກລຸ່ມຂຶ້ນເທິງ, ຄ່າຍິ່ງເພີ່ມຍິ່ງໝຸນຕາມເຂັມໂມງ. ມຸມສາມາດຂຽນດ້ວຍຄຳສັບທິດທາງເຊັ່ນ "to right" ກໍ່ໄດ້, ໂດຍ 90deg ເທົ່າກັບ "to right" ແລະ 180deg ເທົ່າກັບ "to bottom".

ວິທີຂຽນຈຸດຢຸດສີແລະຄວາມໂປ່ງໃສ

ຈຸດຢຸດສີ (color stop) ແມ່ນຕຳແໜ່ງທີ່ສີນັ້ນປາກົດຢູ່ໃນ gradient, ໂດຍ 0% ແມ່ນຈຸດເລີ່ມຕົ້ນ ແລະ 100% ແມ່ນຈຸດສິ້ນສຸດ. ຕົວຢ່າງ "#3B82F6 0%, #8B5CF6 100%" ແມ່ນການກຳນົດໃຫ້ສີປ່ຽນຈາກສີຟ້າທີ່ຈຸດເລີ່ມຕົ້ນໄປສີມ່ວງທີ່ຈຸດສິ້ນສຸດ.

ຮູບແບບ #RRGGBB：ຮູບແບບ #RRGGBB ແມ່ນການຂຽນສີທີ່ສະແດງຄວາມເຂັ້ມຂອງສີແດງ, ຂຽວ, ແລະຟ້າເປັນເລກຖານ 16 ສອງຫຼັກ, ໂດຍ #FF0000 ແມ່ນສີແດງແບບບໍ່ໂປ່ງໃສ.
ຮູບແບບ rgba：ຮູບແບບ rgba ແມ່ນການຂຽນສີທີ່ເພີ່ມຄ່າຄວາມໂປ່ງໃສ (0 ຫາ 1) ເຂົ້າກັບຄ່າສີແດງ, ຂຽວ, ຟ້າ (0 ຫາ 255), ໂດຍຄວາມໂປ່ງໃສ 0.5 ແມ່ນສີທີ່ໂປ່ງໃສເຄິ່ງໜຶ່ງ.