Радиальный градиент (конечная позиция)

by webref

HTML

<div>Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.</div>

CSS

div {
  background-image: radial-gradient(closest-corner at 20px 20px, green, blue);
  padding: 1rem;
  width: 300px;
}

div:hover {
  background-image: radial-gradient(farthest-side at 20px 20px, green, blue);
}