მთავარ შინაარსზე გადასვლა
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-მდე ფერის შეჩერების წერტილს ბრაუზერის ბუნებრივი ფერის ამომრჩეველის გამოყენებით, შემდეგ ათავსებთ თითოეულ წერტილს 0–100% ღერძის გასწვრივ დიაპაზონის სლაიდერით. წრფივი და კონუსური გრადიენტებისთვის ასევე ირჩევთ კუთხეს (0–360°); რადიალური გრადიენტებისთვის ირჩევთ ფორმას (ელიფსი ან წრე) და ზომის საკვანძო სიტყვას, რომელიც აკონტროლებს, რამდენად ვრცელდება გრადიენტი.
  2. 2
    buildCss აწყობს გრადიენტის სტრიქონს
    ყოველ ცვლილებაზე, ლოკალური buildCss ფუნქცია ერთმანეთს უერთებს თქვენს პარამეტრებს სწორ CSS ფუნქციის გამოძახებაში — მაგ. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). ბიბლიოთეკა ჩართული არ არის; სტრიქონი აშენებულია მარტივი JavaScript შაბლონის ლოგიკით და პირდაპირ წერტილების მასივიდან ერთიანდება.
  3. 3
    ცოცხალი გადახედვა რენდერდება inline სტილით
    აწყობილი გრადიენტის სტრიქონი პირდაპირ გამოიყენება div ელემენტზე, როგორც inline ფონის სტილი, ასე რომ ბრაუზერის საკუთარი CSS ძრავი ხატავს გადახედვას. Canvas ან სურათი ჩართული არ არის — ის, რასაც ხედავთ, სიტყვასიტყვით გამოყენებული CSS თვისებაა.
  4. 4
    მზა-კოპირებადი გამომავალი ოთხ ფორმატში
    ფორმატის ამომრჩეველი იმავე გრადიენტის სტრიქონს გარდაქმნის უბრალო CSS-ად (background: ...), CSS-with-solid-fallback ბლოკად, Tailwind თვითნებური-მნიშვნელობის კლასად ან SCSS ცვლადის დეკლარაციად. „კოპირებაზე“ დაწკაპუნება ირჩეულ გამომავალს ბუფერში წერს navigator.clipboard.writeText-ის მეშვეობით. მიმდინარე გრადიენტი ასევე იკოდირება URL hash-ში, ასე რომ შეგიძლიათ ჩანიშნოთ ან გაუზიაროთ.

დაკავშირებული ინსტრუმენტები

🟦

CSS Grid შემქმნელი

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

სცადე
↔️

CSS Flexbox შემქმნელი

აკეთეთ ექსპერიმენტი flex მიმართულებით, მოტეხვით, justify და align ცოცხლი ელემენტებით — და დააკოპიეთ CSS.

სცადე
🧮

მატრიცის კალკულატორი

შეკრიბეთ, გამოაკელით, გაამრავლეთ, ტრანსპონირეთ, ინვერსირეთ და დაიყვანეთ მატრიცები, ასევე დეტერმინანტი, რანგი, საკუთარი მნიშვნელობები და Ax = b-ის ამოხსნა — 8×8-მდე, ერთი შეხებით კოპირებით. უფასო და კონფიდენციალური.

სცადე

ხშირად დასმული კითხვები