CSS Градиент Генератор

Өнгө ба өнцөг сонгоход л CSS градиентийн кодыг урьдчилан үзэхийн дэрэгдэл үүсгэнэ

Шинэчлэлтийн мэдээлэлCSS градиент генератор нэмэв, өнгө болон өнцгийг сонгож кодыг үүсгэхШинэ мэдээллийг үзэх

Онцлог

Урьдчилан үзэх ба код нэгэн зэрэг шинчилнэ

Өнгө эсвэл өнцгийг өөрчилснөөс хойш үзүүлэлт ба CSS нэгэн зэрэг өөрчлөгдөнө

Шугаман·дугуй·сэнтийг дэмжинэ

Өнцөг·хэлбэр·төвийн байрлал хүртэл төрлөөр нь нарийн зааж өгөх

10 өнгөг хүртэлийг чирэхээр засна

Өнгөний байрлалыг мөр дээрх чирэлтээр, ил тод байдлыг гүйлгүүрээр засна

8 өрнөк ба санамсаргүй үүсгэлт

Хэвийн өнгө эсвэл санамсаргүй өнгөнөөс эхлэн нарийн засна

Ашиглаж байгаа арга

Төрлийг сонгох

Шугаман·дугуй·сэнтийнээс градиентийн төрлийг сонгоно

Өнгөө сонгох

Өнгийн кодоор эсвэл өрнөгөөр өнгө сонгож, "Өнгө нэмэх"-гээр өнгө нэмж байрлал ба ил тод байдлыг засна

Чиглэлийг засна

Шугаман өнцөг эсвэл чиглэлийн товчлуур, дугуй·сэнтий төвийн байрлалыг зааж өгнө

Кодыг хөхөөлж авна

"Хөхөө авах" товчлуураар нэг мөрийн CSS-г өөрийн хэв маягт наалдуулна

Хэрэглэлийн нөхцлүүд

Баатарлагийн зургийн ар фон үүсгэх

Сайтын оргило эсвэл товчлуурын ар фоны өнгө кодгүй сонгоно

Блогийн гарчигийн өнгө сонгох

Өрнөгөөс ойр өнгө сонгож нийтлэлийн гарчигийн фон сүүдэрлэнэ

Зургийн дээр идэвхтэй орлуулалт

Ил тод байдлыг доошлуулсан өнгөөр зургийн дээр хэвтэх хагас ил тод давхар үүсгэнэ

Олон өнгөний градиентийг засна

3 ба түүнээс дээш өнгөний хил байрлалыг чирэлтээр бага багаар шахна

Суурь мэдлэг

linear·radial·conic-ийн ялгаа

CSS-ийн градиент өнгөний өөрчлөлтийн ялгаатай 3 функц байгаа бөгөөд бүгд background шинжээр бичиж хэрэглэнэ.

linear-gradient：linear-gradient нь зааж өгөөд өнцөг шулуун дээр өнгө өөрчлөгддөг шугаман градиент юм.
radial-gradient：radial-gradient нь төвийн байрлалаас гадуур тийш дугуй эсвэл эллипсийн хэлбэрээр өнгө дэлгэрдэг дугуй градиент юм.
conic-gradient：conic-gradient нь төвийн байрлалын эргэн тойронд цагийн зүүний дагуу нэг эргэлт хийхэд өнгө өөрчлөгддөг сэнтийн градиент юм.

Өнцөг ба чиглэлийн түлхүүр үгийн адилтгал

linear-gradient-ийн өнцөг 0deg бол доороос дээш чиглэлтэй, тоо нэмэгдэхэд цагийн зүүний дагуу эргэнэ. Өнцөг "to right" гэх мэтийн чиглэлийн түлхүүр үгээр бичиж болох бөгөөд 90deg нь "to right", 180deg нь "to bottom"-тай адил чиглэлтэй.

Өнгөний зогсоолтын цэг ба ил тод байдлын бичилцэ

Өнгөний зогсоолтын цэг (өнгөний зогс) нь градиентийн дээр тэр өнгөтэй болох байрлал юм, 0% нь эхлэл, 100% нь төгсгөлийн төлөв юм. Жишээ нь "#3B82F6 0%, #8B5CF6 100%" нь эхлэлийн цэнхэр өнгөнөөс төгсгөлийн нил ягаан өнгө хүртэл өнгө өөрчлөгдөх заалт юм.

#RRGGBB хэлбэр：#RRGGBB хэлбэр нь улаан·ногоон·цэнхэр хүчийг 2 оронтойгоор 16 суурь тоогоор сүүлийн цифр бичих өнгөний бичилцэ бөгөөд #FF0000 нь сүүлийн цифр улаан өнгө юм.
rgba хэлбэр：rgba хэлбэр нь улаан·ногоон·цэнхэр утга (0〜255) дээр ил тод байдлыг (0〜1) нэмж өгөх өнгөний бичилцэ бөгөөд ил тод байдал 0.5 нь хагас ил тод өнгө юм.