• Keeping learning so much CSS from this shiny card animation

when a div is absolutely positioned and you want it to fill its parent you can use inset: 0 which is the same as :

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

CSS radial gradients can get complicated. At its most basic its a function that can take as many colour properties as you want and it will distribute it evenly in circular fashion.

  background: radial-gradient(red, green, blue);

We can add a percentage that defines each colour’s stop points. CSS blends the colours for us.

  background: radial-gradient(red 10%, green 20%, blue 80%);

ok, so is also a secret optional preliminary argument too… MDN documents the radial-gradient function like so:

radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<ending-shape> - can either be circle or elipse , elipse is basically just a stretched circle to match the aspect ratio of the element it’s in.

<size> - has four options documented here

• closest-side
• closest-corner
• farthest-side
• farthest-corner - default

<position> - defaults to center but supports an x and y . This is the param that we can make dynamic via CSS variable to achieve interesting effects like a spotlight effect

so our simple CSS radial gradient could now look like this:

  background: radial-gradient(farthest-side circle at var(--x, 0%) var(--y, 10%), red 10%, green 20%, blue 80%);