Background Radial
| Class | Styles |
|---|---|
bg-radial-<theme-color> | background-size: var(--tw-bg-radial-gap-x, 32px) var(--tw-bg-radial-gap-y, 32px);
background-image: radial-gradient(circle, <theme-color> var(--tw-bg-radial-size, 1px), transparent 0); |
bg-radial-(<custom-property>) | background-size: var(--tw-bg-radial-gap-x, 32px) var(--tw-bg-radial-gap-y, 32px);
background-image: radial-gradient(circle, var(<custom-property>) var(--tw-bg-radial-size, 1px), transparent 0); |
bg-radial-[<arbitrary-value>] | background-size: var(--tw-bg-radial-gap-x, 32px) var(--tw-bg-radial-gap-y, 32px);
background-image: radial-gradient(circle, <arbitrary-value> var(--tw-bg-radial-size, 1px), transparent 0); |
Examples
Basic
<div class="bg-radial-gray-600 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)]"></div>Gap
| Class | Styles |
|---|---|
bg-radial-gap-<theme-spacing> | --tw-bg-radial-gap-x: calc(var(--spacing) * <theme-spacing>);
--tw-bg-radial-gap-y: calc(var(--spacing) * <theme-spacing>); |
bg-radial-gap-<number> | --tw-bg-radial-gap-x: calc(var(--spacing) * <number>);
--tw-bg-radial-gap-y: calc(var(--spacing) * <number>); |
bg-radial-gap-(<custom-property>) | --tw-bg-radial-gap-x: var(<custom-property>);
--tw-bg-radial-gap-y: var(<custom-property>); |
bg-radial-gap-[<arbitrary-value>] | --tw-bg-radial-gap-x: <arbitrary-value>;
--tw-bg-radial-gap-y: <arbitrary-value>; |
<div class="bg-radial-gap-4 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-radial-gray-600"></div>Gap X
| Class | Styles |
|---|---|
bg-radial-gap-x-<theme-spacing> | --tw-bg-radial-gap-x: calc(var(--spacing) * <theme-spacing>); |
bg-radial-gap-x-<number> | --tw-bg-radial-gap-x: calc(var(--spacing) * <number>); |
bg-radial-gap-x-(<custom-property>) | --tw-bg-radial-gap-x: var(<custom-property>); |
bg-radial-gap-x-[<arbitrary-value>] | --tw-bg-radial-gap-x: <arbitrary-value>; |
<div class="bg-radial-gap-x-16 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-radial-gray-600"></div>Gap Y
| Class | Styles |
|---|---|
bg-radial-gap-y-<theme-spacing> | --tw-bg-radial-gap-y: calc(var(--spacing) * <theme-spacing>); |
bg-radial-gap-y-<number> | --tw-bg-radial-gap-y: calc(var(--spacing) * <number>); |
bg-radial-gap-y-(<custom-property>) | --tw-bg-radial-gap-y: var(<custom-property>); |
bg-radial-gap-y-[<arbitrary-value>] | --tw-bg-radial-gap-y: <arbitrary-value>; |
<div class="bg-radial-gap-y-16 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-radial-gray-600"></div>Size
| Class | Styles |
|---|---|
bg-radial-size-<number> | --tw-bg-radial-size: <number>px; |
bg-radial-size-(length:<custom-property>) | --tw-bg-radial-size: var(<custom-property>); |
bg-radial-size-[<arbitrary-value>] | --tw-bg-radial-size: <arbitrary-value>; |
<div class="bg-radial-size-2 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-radial-gray-600"></div>