new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/box-shadow

32 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

shadow-sm utility class

The shadow-sm utility applies box-shadow: var(--shadow-sm); which expands to 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1).

shadow-md utility class

The shadow-md utility applies box-shadow: var(--shadow-md); which expands to 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1).

shadow-lg utility class

The shadow-lg utility applies box-shadow: var(--shadow-lg); which expands to 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1).

shadow-2xl utility class

The shadow-2xl utility applies box-shadow: var(--shadow-2xl); which expands to 0 25px 50px -12px rgb(0 0 0 / 0.25).

shadow color with custom property

The shadow-(color:<custom-property>) syntax allows using a custom CSS property for shadow color by setting --tw-shadow-color: var(<custom-property>).

inset-shadow-sm utility class

The inset-shadow-sm utility applies box-shadow: var(--inset-shadow-sm); which expands to inset 0 2px 4px rgb(0 0 0 / 0.05).

inset-shadow-none utility class

The inset-shadow-none utility applies box-shadow: inset 0 0 #0000;, removing inset box shadows from an element.

inset-shadow with custom property

The inset-shadow-(<custom-property>) syntax allows using a custom CSS property for inset box-shadow by applying box-shadow: var(<custom-property>).

inset-shadow arbitrary value

The inset-shadow-[<value>] syntax allows specifying an arbitrary inset box-shadow value directly with box-shadow: <value>.

inset-shadow-inherit utility class

The inset-shadow-inherit utility sets --tw-inset-shadow-color: inherit;.

inset-shadow-current utility class

The inset-shadow-current utility sets --tw-inset-shadow-color: currentColor;.

inset-shadow-transparent utility class

The inset-shadow-transparent utility sets --tw-inset-shadow-color: transparent;.

inset-shadow color utilities with color names

Inset shadow color utilities are available for all theme colors using the inset-shadow-<colorname> syntax, which sets --tw-inset-shadow-color: var(--color-<colorname>). For example, inset-shadow-indigo-500 and inset-shadow-cyan-500.

inset-ring utility class

The inset-ring utility applies --tw-inset-ring-shadow: inset 0 0 0 1px, creating a 1px solid inset ring.

inset-ring-<number> utility class

The inset-ring-<number> utility applies --tw-inset-ring-shadow: inset 0 0 0 <number>px, allowing customization of inset ring width.

inset-ring with custom property

The inset-ring-(<custom-property>) syntax allows using a custom CSS property for inset ring shadow by applying --tw-inset-ring-shadow: inset 0 0 0 var(<custom-property>);.

inset-ring arbitrary value

The inset-ring-[<value>] syntax allows specifying an arbitrary inset ring value directly with --tw-inset-ring-shadow: inset 0 0 0 <value>;.

inset-ring-inherit utility class

The inset-ring-inherit utility sets --tw-inset-ring-color: inherit;.

inset-ring-current utility class

The inset-ring-current utility sets --tw-inset-ring-color: currentColor;.

inset-ring-transparent utility class

The inset-ring-transparent utility sets --tw-inset-ring-color: transparent;.

inset-ring color utilities with color names

Inset ring color utilities are available for all theme colors using the inset-ring-<colorname> syntax, which sets --tw-inset-ring-color: var(--color-<colorname>). For example, inset-ring-indigo-500 and inset-ring-cyan-500.

inset-ring-0 removes inset ring shadows

The inset-ring-0 utility can be used to remove an existing inset ring from an element.

default inset ring color is currentColor

By default, inset rings match the currentColor of the element they are applied to.

default box shadow opacity is low

The default box shadow opacities are quite low (25% or less). Increasing the opacity (to like 50%) will make box shadows more pronounced.

default inset shadow opacity is low

The default inset shadow opacities are quite low (5%). Increasing the opacity (to like 50%) will make inset shadows more pronounced.

colored shadows default opacity is 100%

By default, colored shadows (e.g., shadow-cyan-500) have an opacity of 100%, but you can adjust this using the opacity modifier (e.g., shadow-cyan-500/50).

colored inset rings default opacity is 100%

By default, colored inset rings have an opacity of 100%, but you can adjust this using the opacity modifier (e.g., inset-ring-blue-500/50).

shadow opacity modifier

Box shadow opacity can be adjusted using the opacity modifier syntax (e.g., shadow-xl/20 or shadow-xl/30) to change the transparency of the shadow.

inset-shadow opacity modifier

Inset shadow opacity can be adjusted using the opacity modifier syntax (e.g., inset-shadow-sm/50) to change the transparency of the shadow.

box-shadow utilities support responsive design

All box-shadow utilities support responsive design variants.

custom value support for box-shadow utilities

The shadow, inset-shadow, ring, and inset-ring utilities support custom values via the square bracket syntax.

Shadow scale renamed

In v4, shadow utilities have been renamed: shadow-sm → shadow-xs, shadow → shadow-sm. This affects the default shadow scale to ensure every utility has a named value.

Give your agent this brain