Начните с двух небольших элементов: задайте кнопке
linear-gradient(), а карточке radial-gradient(). Первый смешивает цвета вдоль прямой, второй распределяет их от центра. Разница станет видна прямо в браузере.В разборе линейных и радиальных градиентов есть готовые примеры кнопки и светового пятна. Там же показано, как угол задаёт направление линии, положение центра смещает пятно, а проценты отмечают места, где должны появиться выбранные цвета.
Скопируйте примеры и проведите три проверки: замените угол
90deg на 135deg, перенесите центр с 50% 30% на 30% 20%, затем добавьте третий цвет. После каждого изменения сравните результат: так синтаксис быстрее связывается с тем, что рисует браузер.