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/filter-drop-shadow

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

drop-shadow utility classes in Tailwind v4

The drop-shadow utility classes in Tailwind v4 are: drop-shadow-xs (0 1px 1px rgb(0 0 0 / 0.05)), drop-shadow-sm (0 1px 2px rgb(0 0 0 / 0.15)), drop-shadow-md (0 3px 3px rgb(0 0 0 / 0.12)), drop-shadow-lg (0 4px 4px rgb(0 0 0 / 0.15)), drop-shadow-xl (0 9px 7px rgb(0 0 0 / 0.1)), drop-shadow-2xl (0 25px 25px rgb(0 0 0 / 0.15)), and drop-shadow-none (0 0 #0000). Each uses filter: drop-shadow() with CSS custom properties for the shadow values.

drop-shadow arbitrary and color variants

Drop-shadow supports arbitrary values with drop-shadow-[<value>] syntax for custom drop-shadow filter values. Color variants include drop-shadow-(<custom-property>) for custom properties, drop-shadow-(color:<custom-property>) to set --tw-drop-shadow-color CSS variable, drop-shadow-inherit, drop-shadow-current, and drop-shadow-transparent. Named color utilities like drop-shadow-cyan-500 set the --tw-drop-shadow-color variable to the corresponding color.

drop-shadow opacity modifier

Drop-shadow opacity can be adjusted using the opacity modifier syntax, for example drop-shadow-xl/25 or drop-shadow-xl/50. Default drop shadow opacities are low (15% or less), so increasing opacity makes shadows more pronounced.

drop-shadow color application with opacity

Colored drop shadows are set using utilities like drop-shadow-cyan-500 or drop-shadow-indigo-500. Colored shadows have a default opacity of 100%, but this can be adjusted using the opacity modifier (for example drop-shadow-cyan-500/50).

drop-shadow use case and alternative

Drop-shadow filters are useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular rectangular elements, box-shadow should be used instead.

Give your agent this brain