Background

Underlying visual layer.

html

<div class="bg-wrap" role="img" aria-label="A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background" data-bg="solid" style="--c1:#A8E6C1;--c2:#BFD9F2;">
  <div class="bg-panel" style="height:100px;"></div>
  <p class="bg-caption">background: solid &middot; #A8E6C1 &amp; #BFD9F2</p>
</div>
<style>
.bg-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.bg-panel { border-radius: 10px; border: 1.5px solid #24143022; }
[data-bg="solid"] .bg-panel { background: var(--c1); }
[data-bg="gradient"] .bg-panel { background: linear-gradient(135deg, var(--c1), var(--c2)); }
[data-bg="dots"] .bg-panel { background-color: var(--c1); background-image: radial-gradient(var(--c2) 2.5px, transparent 2.5px); background-size: 16px 16px; }
.bg-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="bg-tw font-sans text-[#241430] w-[300px]" role="img" aria-label="A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background" data-bg="solid" style="--c1:#A8E6C1;--c2:#BFD9F2;">
  <div class="bg-tw-panel rounded-[10px] border-[1.5px] border-[#24143022]" style="height:100px;"></div>
  <p class="mt-2.5 text-xs text-[#241430]/80">background: solid &middot; #A8E6C1 &amp; #BFD9F2</p>
</div>
<style>
.bg-tw[data-bg="solid"] .bg-tw-panel { background: var(--c1); }
.bg-tw[data-bg="gradient"] .bg-tw-panel { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.bg-tw[data-bg="dots"] .bg-tw-panel { background-color: var(--c1); background-image: radial-gradient(var(--c2) 2.5px, transparent 2.5px); background-size: 16px 16px; }
</style>

react

export function Background({
  type = "solid",
  color1 = "#A8E6C1",
  color2 = "#BFD9F2",
  height = 100,
}) {
  const bg = type === "solid" ? color1
    : type === "gradient" ? `linear-gradient(135deg, ${color1}, ${color2})`
    : `radial-gradient(${color2} 2.5px, transparent 2.5px)`;
  const style = { height, borderRadius: 10, border: "1.5px solid #24143022",
    ...(type === "dots" ? { backgroundColor: color1, backgroundImage: bg, backgroundSize: "16px 16px" } : { background: bg }) };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background">
      <div style={style} />
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>background: {type} &middot; {color1} &amp; {color2}</p>
    </div>
  );
}