Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS градиент үүсгэгч — үнэгүй

Шууд урьдчилан харалттайгаар шугаман, радиаль, конус CSS градиентуудыг үүсгэх. Нэг товшилтоор CSS-г хуулах.

Ачаалагдсаны дараа офлайн ажилладаг
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Эрс ялгаатай өнгөнүүдийн хоорондох саарал дунд хэсгээс сэргийлнэ. Хуучин хөтчид зориулж энгийн sRGB мөрийг нөөцөөр нэмнэ.

0%
100%

Урьдчилсан тохиргоо

Түгээмэл хэрэглээ

  • Ер дүнгийн хэсэгүүдийн градиент үүсгэхВебсайтын ер дүнгийн хэсэгүүд болон сайтын хуудсуудын бүтэн хуудас градиент фон байцаалыг сахуулах.
  • Градиент товчлуу болон CTA үүсгэхХүүхэлсэн үйлдлийн дуудлага дүрүүлэлтийн градиент фон товчлуудыг сахуулалт байцаалыг сахуулах.
  • Карт дээрх фон градиент үүсгэхКартуудын, модал болон хажуу самбарын градиент дүүргэлтүүд болон UI бүрэлдэхүүнүүдийн фон байцаалыг сахуулах.
  • Нийгмийн медиа график зургын градиент үүсгэхInstagram нийтлэл, YouTube нүүд чимэгчлэлүүд болон Twitter картуудын үндэс градиент фон байцаалыг сахуулах.
  • Диаграмм дээрх өнгөний үнэлэмжүүд үүсгэхХалуун газрын зургуудын, явцын баарыг болон өөрөө дүрүүлэлтүүдийн градиент өнгөний үнэлэмжүүдийг үүсгэх.

Хэрхэн ажилладаг

Градиент үүсгэгч CSS градиент мөрийг таны хөтчид шууд бүтээдэг — номын сан, сервер, байршуулалт хамааралгүй. Гараар бичсэн функц таны өнгөний зогсоол, өнцгөөс зөв linear-gradient, radial-gradient эсвэл conic-gradient синтаксыг бодит цагт угсарч, дараа нь таны сонгосон гаралтын зорилтод форматладаг.

  1. 1
    Зогсоол, чиглэлийг тохируулах
    Та хөтчийн уугуул өнгө сонгогчоор 2-6 өнгөний зогсоол тохируулаад, range гулсуураар зогсоол бүрийг 0–100% тэнхлэгт байрлуулна. Шугаман, конус градиентад та мөн өнцөг (0–360°) сонгоно; radial градиентад хэлбэр (эллипс эсвэл тойрог), градиент хэр хол сунадгийг хянадаг хэмжээний түлхүүр үг сонгоно.
  2. 2
    buildCss градиент мөрийг угсардаг
    Өөрчлөлт бүрт локал buildCss функц таны параметрүүдийг зөв CSS функцийн дуудлага руу нэгтгэдэг — жишээ нь linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ямар ч номын сан хамааралгүй; мөр энгийн JavaScript template логикоор бүтээгдэж зогсоолын массиваас шууд нийлдэг.
  3. 3
    Амьд урьдчилан харах inline style-ээр зурагддаг
    Угсарсан градиентын мөр div элементэд inline background style болгон шууд хэрэглэгддэг, тул хөтчийн өөрийн CSS систем урьдчилан харахыг зурдаг. Canvas, зураг хамааралгүй — та харж байгаа зүйл яг л хэрэглэгдэж буй CSS шинж чанар.
  4. 4
    Дөрвөн форматад хуулахад бэлэн гаралт
    Формат сонгогч ижил градиентын мөрийг энгийн CSS (background: ...), CSS-хатуу-нөөцтэй блок, Tailwind дурын-утгын класс, эсвэл SCSS хувьсагчийн тодорхойлолт руу хувиргадаг. Copy дарах нь navigator.clipboard.writeText-ээр сонгосон гаралтыг clipboard руу бичдэг. Одоогийн градиент мөн URL hash-д кодлогддог тул та хавчуурга хийх, хуваалцах боломжтой.

Холбоотой хэрэгслүүд

🟦

CSS торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх
↔️

CSS flexbox үйлдвэрлэгч

Flex чиглэл, wrap, justify болон align-ийг амьд элементүүд дээр туршиж — мөн CSS-ийг хуул.

Туршиж үзэх
🧮

Матриц Калькулятор

Матрицыг нэмэх, хасах, үржүүлэх, транспозлох, урвуулах, хялбарчлах, мөн детерминант, ранг, өөрийн утга олох, Ax = b бодох — 8×8 хүртэл, нэг товшилтоор хуулна. Үнэгүй, нууцлалтай.

Туршиж үзэх

Түгээмэл асуултууд