Генератор на CSS градиенти – линейни и радиални
Генераторът на CSS градиенти създава CSS фон градиент от два цвята. Изберете линеен градиент и задайте неговия ъгъл, или изберете радиален градиент, след което проверявайте живия преглед, докато настройвате избора си. Копирайте получената CSS декларация и я поставете в стилов файл. Това е бърз начин да изградите градиентни стилове, без да пишете стойността на ръка.
Генераторът на CSS градиенти е базиран в браузъра инструмент за създаване на CSS градиенти от два цвята. Изберете линеен градиент с ъгъл или радиален градиент, прегледайте живия преглед и копирайте получената декларация за фон в своя стилов файл. Той предоставя директен начин да създавате CSS градиенти, без да пишете стойността на ръка.
Работният процес е прост: задайте цветовете и типа градиент, след което настройте ъгъла, когато използвате линеен градиент. Прегледът се обновява, за да покаже избрания градиент, а инструментът предоставя получената CSS декларация за копиране. Линейните и радиалните градиенти предлагат различни начини за преход между цветовете: линейният градиент следва посока, докато радиалният градиент се разпространява навън от централна зона.
Използвайте генериран CSS градиент, когато искате цветови преход в стилов файл, а не статична цветова стойност или ръчно съставена декларация. Линейната опция е полезна, когато посоката има значение; радиалната опция предоставя различна форма на прехода. Можете да използвате генерираните стойности и в тестове, фикстури, първоначални данни или прототипи.
Генераторът на CSS градиенти работи изцяло във вашия браузър. Никакъв вход не се качва, съхранява или изпраща към сървър, а след зареждане на страницата инструментът работи офлайн. Той е безплатен за употреба и може да помогне на разработчици и DevOps инженери, които искат да създават, преглеждат и копират градиентен CSS бързо.
Стъпка 1: Изберете два цвята за градиента. Тези цветове се използват за изграждане на CSS стойността за фон.
Стъпка 2: Изберете линеен или радиален градиент. Ако изберете линеен, задайте ъгъла, за да контролирате неговата посока.
Стъпка 3: Проверявайте живия преглед, докато настройвате избора си. Той показва как изглежда градиентът, преди да копирате CSS.
Стъпка 4: Копирайте получената CSS декларация за фон и я поставете в своя стилов файл.
Случай на употреба: Създавайте CSS стойности за градиенти за тестове, фикстури или първоначални данни, така че примерите да използват готови за поставяне стилове.
Случай на употреба: Генерирайте множество стойности за градиенти наведнъж, вместо да измисляте всяка стойност на ръка.
Случай на употреба: Вземайте правилно случайни стойности за градиенти, вместо да разчитате на предположения, напечатани на клавиатура.
Случай на употреба: Опитайте линейни и радиални варианти за интерфейс, преди да добавите избрания CSS в стилов файл.
Случай на употреба: Подгответе градиентен стил за прототип, като изберете два цвята и проверите живия преглед.
Случай на употреба: Копирайте градиентна декларация за употреба в проект, без да съставяте CSS стойността ръчно.