Keegan Donley

Use this playground to see how aspect-ratio affects the rectangle!

Edit the following HTML and CSS to experiement in real-time! You'll see the results in the preview above. Tailwind classes are supported and generated on the fly.

html

Tailwind:

<p>Use this playground to see how aspect-ratio affects the rectangle!</p>

<br>

<div id="aspect" />

css

#aspect {
  background: rgba(120,60,255,0.6);
  backdrop-filter: blur(4px);

  /* Only width is set - no height */
  width: 200px;

  /* Aspect Ratio - Change this and see the effects! */
  aspect-ratio: 1;
}