Генератор радіального CSS-градієнта
Створюйте CSS-градієнти візуально: лінійний, радіальний або конічний тип, повзунок кута та до шести колірних зупинок із живим передпереглядом на всю ширину та кодом для копіювання.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор градієнтів із вже обраним радіальним типом: кольори розходяться назовні від центру елемента концентричними колами, і кожна змінена зупинка миттєво перемальовує передперегляд.
radial-gradient() — це інструмент для ефектів точкового підсвічування та світіння, м’якого віньєтування та фонів, які потребують фокусної точки, а не напрямку. Позиції зупинок у відсотках співвідносяться з відстанню від центру — 0% це середина, 100% — дальній край, — тому звуження перших зупинок створює невелике яскраве ядро, а розширення — широке заливання.
Скопіюйте фоновий рядок, коли передперегляд виглядатиме правильно. Повзунок кута в цьому режимі прихований, тому що коло не має напрямку — перемкніться назад на лінійний або конічний, і він з’явиться знову.