შექმენით ლამაზი CSS გრადიენტები ძალისხმევის გარეშე

შექმენით განსაცვიფრებელი ხაზოვანი, რადიალური და კონუსური გრადიენტები ჩვენი ინტუიციური ინტერფეისით. დააკოპირეთ CSS კოდი და მყისიერად გამოიყენეთ თქვენს პროექტებში.

Preview

გენერირებული CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

გრადიენტის კონტროლი

135°
0%
100%

პოპულარული წინასწარ დაყენებული პარამეტრები

გრადიენტის მაგალითები

გაეცანით გრადიენტის ამ განსაცვიფრებელ მაგალითებს და მიიღეთ შთაგონება თქვენი შემდეგი პროექტისთვის. დააწკაპუნეთ ნებისმიერ გრადიენტზე, რომ ჩატვირთოთ ის გენერატორში.

მზის ჩასვლის რუჟი

თბილი გრადიენტი, რომელიც შთაგონებულია ულამაზესი მზის ჩასვლებით.

ოკეანის ნიავი

მშვიდი გრადიენტი, რომელიც სანაპირო წყლების შეგრძნებას იწვევს.

მინტ ფიუჟენი

ახალი და თანამედროვე გრადიენტი, რომელიც აერთიანებს პიტნისა და ცისფერ ფერებს.

აყვავებულ ბაღში

ნათელი გრადიენტი, რომელიც ბუნების სილამაზეს წარმოადგენს.

კოსმიური სიზმარი

ჯადოსნური გრადიენტი, რომელიც შთაგონებულია ღამის ცით.

ოქროს საათი

თბილი გრადიენტი, რომელიც იპყრობს ბინდის არსს.

გრადიენტის დოკუმენტაცია

რა არის CSS გრადიენტები?

CSS გრადიენტები საშუალებას გაძლევთ აჩვენოთ გლუვი გადასვლები ორ ან მეტ ფერს შორის. მათი გამოყენება შესაძლებელია ელემენტების ფონად და სამი განსხვავებული ტიპით არის ხელმისაწვდომი:

  • ხაზოვანი გრადიენტები:გარდამავალი ფერები სწორი ხაზის გასწვრივ.
  • რადიალური გრადიენტები:გარდამავალი ფერები ცენტრალური წერტილიდან გარეთ.
  • კონუსური გრადიენტები:გარდამავალი ფერები წრის ცენტრალური წერტილის გარშემო.

როგორ გამოვიყენოთ გრადიენტები

ჩვენი ხელსაწყოს გამოყენებით გრადიენტის გენერირების შემდეგ, შეგიძლიათ გამოიყენოთ CSS კოდი თქვენს პროექტებში:

  1. დააკოპირეთ CSS კოდი გენერატორიდან.
  2. ჩასვით ის თქვენს CSS ფაილში ან გამოიყენეთ ის თქვენს HTML ელემენტებში.
  3. გრადიენტი ნებისმიერ ელემენტზე გამოიყენეთ შემდეგი ღილაკების გამოყენებით:background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • უფრო რთული გრადიენტის ეფექტისთვის გამოიყენეთ ორზე მეტი ფერი.
  • გადასვლების ადგილის გასაკონტროლებლად, შეცვალეთ ფერების პოზიციები.
  • კიდევ უფრო კრეატიული ეფექტებისთვის გააერთიანეთ მრავალი გრადიენტი.
  • კონუსური გრადიენტებისთვის ცენტრის შეცვლა საინტერესო ნიმუშებს ქმნის.
  • შეინახეთ თქვენი საყვარელი გრადიენტები მოგვიანებით გამოყენებისთვის.

ბრაუზერის მხარდაჭერა

CSS გრადიენტები ფართოდ არის მხარდაჭერილი თანამედროვე ბრაუზერებში. თუმცა, ძველ ბრაუზერებში, როგორიცაა Internet Explorer, შესაძლოა ისინი სწორად არ იყოს ნაჩვენები. ყოველთვის მიუთითეთ სარეზერვო ფერი:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

ამ ხელსაწყოს შესახებ

ჩვენი CSS გრადიენტის გენერატორი შექმნილია იმისთვის, რომ დაეხმაროს დეველოპერებსა და დიზაინერებს ლამაზი გრადიენტების მარტივად შექმნაში. მიუხედავად იმისა, მუშაობთ ვებსაიტზე, აპლიკაციაზე თუ უბრალოდ გსურთ ფერებთან ექსპერიმენტი, ეს ინსტრუმენტი აადვილებს თქვენი პროექტისთვის იდეალური გრადიენტის გენერირებას.

Features

მარტივი გამოსაყენებელი

ინტუიციური ინტერფეისი გრადიენტების შესაქმნელად.

რეაგირებადი დიზაინი

იდეალურად მუშაობს ყველა ზომის ეკრანზე.

კოპირება-ჩასმა მზადაა

მიიღეთ სუფთა CSS კოდი მყისიერად.

წინასწარ დაყენებული პარამეტრები ხელმისაწვდომია

დაიწყეთ ლამაზი წინასწარ განსაზღვრული გრადიენტებით.

Related Tools

სტილუსის CSS-ში გადამყვანი

გარდაქმენით თქვენი SCSS კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.

CSS-ის გალამაზება

დააფორმატეთ და გაალამაზეთ თქვენი CSS კოდი პროფესიონალური სიზუსტით

შექმენით იდეალური Flexbox განლაგებები

ვიზუალიზაცია გაუკეთეთ, პერსონალიზირება გაუკეთეთ და გენერირება გაუკეთეთ CSS flexbox კოდს ჩვენი ინტუიციური გადათრევის და ჩაშვების ინტერფეისის გამოყენებით.

CSV-დან Base64-მდე გადამყვანი

სწრაფად და მარტივად გარდაქმენით თქვენი CSV მონაცემები Base64 კოდირებაში

შექმენით ლამაზი CSS ყუთის ჩრდილები ძალისხმევის გარეშე

შექმენით განსაცვიფრებელი კვადრატული ჩრდილები ჩვენი ინტუიციური ინტერფეისით. დააკოპირეთ CSS კოდი და მყისიერად გამოიყენეთ თქვენს პროექტებში.

MD2 ჰეშ გენერატორი

ამ ონლაინ ხელსაწყოს გამოყენებით სწრაფად და მარტივად გენერირეთ MD2 ჰეშები. უსაფრთხო, საიმედო და მყისიერი შედეგები.