Object color smooth transition from one color to another

I have a component:

const Square = styled.div`
  width: 40px;
  height: 40px;
  background: green;
`;

how do i change the color of the square from green to blue gradually (smooth transition from green to blue, maybe over a second)?