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

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

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

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

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

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

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

შექმენით შემთხვევითი სიტყვები ნებისმიერი მიზნით

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

RGB-დან CMYK-მდე

ბეჭდვის დიზაინისთვის RGB ფერების CMYK მნიშვნელობებად გადაქცევა

JSON-ის TSV-ად გადაკეთება ძალისხმევის გარეშე

გარდაქმენით თქვენი JSON მონაცემები Tab-Separated Values ​​(TSV) ფორმატში ერთი დაწკაპუნებით. სწრაფი, უსაფრთხო და სრულად ბრაუზერზე დაფუძნებული.