Стандартное (минимизированное) использование радиального градиента: background: radial-gradient (red, blue). Начальный цвет – в центре градиента, конечный – по краям. Положение центра градиента можно изменить: background: radial-gradient (at 30px 100px, red, blue). При этом, 30 – отступ слева, 100 – слева. Положение центра градиента также можно задавать в процентах или при помощи ключевых слов: top, bottom, left, right, center. Задание размера градиента: background: radial-gradient (red 0px, red 20px, blue 60px, blue 100px). Переходов цветов в градиенте может быть сколько угодно. Форма градиента по умолчанию эллиптическая – ellipse...

Некоторое время назад Джефф написал статью о классном эффекте наведения. Эффект основан на комбинации псевдоэлементов CSS, преобразований и переходов. Множество комментариев показали, что тот же эффект можно добиться, используя свойства фона. Джефф упомянул, что это была его первоначальная мысль, и я тоже об этом думал. Я не говорю, что псевдоэлемент, на котором он остановился, плох, но знание различных методов для достижения того же эффекта может быть только хорошим. В этом посте мы переработаем...