ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວສ້າງ CSS Gradient ຟຣີ

ສ້າງ linear, radial ແລະ conic CSS gradient ພ້ອມຕົວຢ່າງ live. ຄັດລອກ CSS ດ້ວຍ click ດຽວ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

ຫຼີກເວັ້ນຈຸດກາງສີເທົາລະຫວ່າງສີທີ່ຕ່າງກັນຫຼາຍ. ເພີ່ມແຖວ sRGB ທຳມະດາເປັນຕົວສຳຮອງສຳລັບບຣາວເຊີເກົ່າ.

0%
100%

ຄ່າຕັ້ງຕົ້ນ

ການນຳໃຊ້ທົ່ວໄປ

  • ສ້າງ Gradient ສໍາລັບ Hero Sectionsອອກແບບ gradient background ໜ້າສົມບູນສໍາລັບ hero sections ແລະ landing pages
  • ສ້າງ Gradient Buttons ແລະ CTAsອອກແບບ gradient background ທີ່ດຶງດູດລະມັດລະວັງສໍາລັບປຸ່ມ call-to-action
  • ສ້າງ Gradient ສໍາລັບ Card Backgroundsອອກແບບ gradient fills ສໍາລັບກາດ ໂມດSERVER sidebars ແລະ UI component backgrounds
  • ສ້າງ Gradient ສໍາລັບ Social Media Graphicsອອກແບບ gradient backgrounds ທີ່ມີສີສັນ Instagram posts YouTube thumbnails ແລະ Twitter cards
  • ສ້າງ Color Scales ສໍາລັບ Chartsສ້າງ gradient color scales ສໍາລັບ heatmaps progress bars ແລະ data visualizations

ມັນເຮັດວຽກແນວໃດ

ຕົວສ້າງເກຣດຽນສ້າງສະຕຣິງ CSS gradient ໂດຍກົງໃນບຣາວເຊີ — ບໍ່ມີໄລບຣາຣີ, ບໍ່ມີເຊີບເວີ, ບໍ່ມີການອັບໂຫຼດ. ຟັງຊັນທີ່ຂຽນເອງປະກອບໄວຍາກອນ linear-gradient, radial-gradient, ຫຼື conic-gradient ທີ່ຖືກຕ້ອງຈາກຈຸດສີ ແລະ ມຸມຂອງທ່ານແບບສົດ, ຈາກນັ້ນຈັດຮູບແບບຜົນລັບຕາມເປົ້າໝາຍທີ່ທ່ານເລືອກ.

  1. 1
    ຕັ້ງຄ່າຈຸດ ແລະ ທິດທາງ
    ທ່ານຕັ້ງຈຸດສີລະຫວ່າງ 2 ຫາ 6 ຈຸດໂດຍໃຊ້ຕົວເລືອກສີທີ່ມີໃນຕົວບຣາວເຊີ, ຈາກນັ້ນວາງແຕ່ລະຈຸດຕາມແກນ 0–100% ດ້ວຍແຖບເລື່ອນ. ສຳລັບເກຣດຽນແບບ linear ແລະ conic ທ່ານຍັງເລືອກມຸມໄດ້ (0–360°); ສຳລັບ radial ທ່ານເລືອກຮູບຮ່າງ (ວົງມົນຮີ ຫຼື ວົງມົນ) ແລະ ຄຳສັບຂະໜາດທີ່ຄວບຄຸມວ່າເກຣດຽນຂະຫຍາຍໄກປານໃດ.
  2. 2
    buildCss ປະກອບສະຕຣິງເກຣດຽນ
    ທຸກຄັ້ງທີ່ມີການປ່ຽນແປງ, ຟັງຊັນ buildCss ໃນເຄື່ອງຈະປະກອບພາລາມິເຕີຂອງທ່ານເຂົ້າກັນເປັນຟັງຊັນ CSS ທີ່ຖືກຕ້ອງ — ຕົວຢ່າງ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). ບໍ່ມີໄລບຣາຣີກ່ຽວຂ້ອງ; ສະຕຣິງຖືກປະກອບດ້ວຍຕັກກະ template ຂອງ JavaScript ທຳມະດາ ແລະ ຮ່ວມກັນໂດຍກົງຈາກອາເລຈຸດ.
  3. 3
    ຕົວຢ່າງແບບສົດສະແດງຜ່ານ inline style
    ສະຕຣິງເກຣດຽນທີ່ປະກອບແລ້ວຖືກນຳໃຊ້ໂດຍກົງກັບອົງປະກອບ div ເປັນ style ພື້ນຫຼັງແບບ inline, ດັ່ງນັ້ນເອັນຈິນ CSS ຂອງບຣາວເຊີເອງຈຶ່ງສະແດງຕົວຢ່າງ. ບໍ່ມີ canvas ຫຼືຮູບພາບກ່ຽວຂ້ອງ — ສິ່ງທີ່ທ່ານເຫັນຄືຄຸນສົມບັດ CSS ທີ່ຖືກນຳໃຊ້ຢ່າງແທ້ຈິງ.
  4. 4
    ຜົນລັບພ້ອມຄັດລອກໃນສີ່ຮູບແບບ
    ຕົວເລືອກຮູບແບບປ່ຽນສະຕຣິງເກຣດຽນດຽວກັນເປັນ CSS ທຳມະດາ (background: ...), ບລັອກ CSS ພ້ອມ solid fallback, ຄລາສ Tailwind arbitrary-value, ຫຼືການປະກາດຕົວແປ SCSS. ການກົດຄັດລອກຈະຂຽນຜົນລັບທີ່ເລືອກລົງໃນຄລິບບອດຜ່ານ navigator.clipboard.writeText. ເກຣດຽນປັດຈຸບັນຍັງຖືກເຂົ້າລະຫັດໄວ້ໃນ URL hash ດັ່ງນັ້ນທ່ານສາມາດບຸກມາກ ຫຼື ແບ່ງປັນມັນໄດ້.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🟦

ເຄື່ອງກໍາເນີດ CSS Grid

ອອກແບບ CSS grid ທາງພາບ — ຕາມຮອຍ, ຫົວໜ່ວຍ ແລະ ຊ່ອງວ່າງ — ແລະ ສຳເນົາ CSS ໄປມາ ແລະ HTML.

ລອງໃຊ້
↔️

ເຄື່ອງກໍາເນີດ CSS Flexbox

ທົດລອງເອົາທິດທາງ flex, ກອບ, justify ແລະ align ເທິງລາຍການກ່ວາວ — ແລະ ສຳເນົາ CSS.

ລອງໃຊ້
🧮

ເຄື່ອງຄິດໄລ່ມາຕຣິກຊ

ບວກ, ລົບ, ຄູນ, ທຣານສະໂພສ, ຫາອິນເວີສ ແລະ ຫຍໍ້ເມທຣິກ, ພ້ອມດີເທີມິແນນ, ແຣັງ, ຄ່າໄອເກນ ແລະ ແກ້ Ax = b — ເຖິງ 8×8, ສຳເນົາດ້ວຍການແຕະດຽວ. ຟຣີ ແລະ ເປັນສ່ວນຕົວ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ