Gradients - Linear vs Opposing Corner Radial

gradients-linear-vs-opposing-corner-radial.markdown

Gradients - Linear vs Opposing Corner Radial

A Pen by Eric Johnston on CodePen.

License.

index.html

<div class="wrapper">
	<span>Linear</span>
	<span>Radial</span>
	<div class="demo-linear"></div>
	<div class="demo-radial"></div>
</div>

style.css

:root {
	--size: 37.5vmin;
}
.wrapper {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-auto-flow: auto;
	gap: 1.5ch 3ch;
	justify-content: space-between;
}
[class^="demo-"] {
	inline-size: var(--size);
  block-size: var(--size);
  border-radius: 1ch;
	
	background-color: rebeccapurple;
}
.demo-linear {
  --color-one: 180 100% 50%;
  --color-two: 328 100% 54%;
	
	background-image: 
    linear-gradient(
      to bottom left, 
      hsl(var(--color-one) / 100%), hsl(var(--color-two) / 100%)
    )
  ;
}
.demo-radial {
  --color-one: 180 100% 50%;
  --color-two: 328 100% 54%;
	
	background-image: 
    radial-gradient(
      circle at top right, 
      hsl(var(--color-one)), hsl(var(--color-one) / 0%)
    ),
    radial-gradient(
      circle at bottom left, 
      hsl(var(--color-two)), hsl(var(--color-two) / 0%)
    )
  ;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
}