Opacity Fix for Magic Pattern CSS Background Code

There's a tool called Magic Pattern which generates background patterns in CSS. When using the generated rules on an element, the background styles bleed into the child elements' backgrounds.

body {
  background-color: #e5e5f7;
  opacity: 0.4;
  background-image: radial-gradient(#444cf7 2px, #e5e5f7 2px);
  background-size: 40px 40px;
}

Fix this by removing the opacity rule, and replacing the radial-gradient hex color arguments with rgba values and the a value equal to the original opacity rule

body {
  background-color: #e5e5f7;
  background-image: radial-gradient(
    rgba(68, 76, 247, .4) 2px,
    rgba(229, 229, 247, .4) 2px
  );
  background-size: 40px 40px;
}