filter: brightness()
En esta página
| Clase | Propiedades CSS |
|---|---|
brightness-<number> |
filter: brightness(<number>%); |
brightness-(<custom-property>) |
filter: brightness(var(<custom-property>)); |
brightness-[<value>] |
filter: brightness(<value>); |
Examples#
Basic example#
Use utilities like brightness-50 and brightness-100 to control an element's brightness:
{
<div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
<div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
<div className="flex shrink-0 flex-col items-center">
<p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
brightness-50
</p>
<div className="relative brightness-50">
<img
className="size-24 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
/>
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
brightness-100
</p>
<div className="relative brightness-100">
<img
className="size-24 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
/>
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
brightness-125
</p>
<div className="relative brightness-125">
<img
className="size-24 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
/>
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
brightness-200
</p>
<div className="relative brightness-200">
<img
className="size-24 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
/>
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
}
<!-- [!code classes:brightness-50,brightness-100,brightness-125,brightness-200] -->
<img class="brightness-50 ..." src="/img/mountains.jpg" />
<img class="brightness-100 ..." src="/img/mountains.jpg" />
<img class="brightness-125 ..." src="/img/mountains.jpg" />
<img class="brightness-200 ..." src="/img/mountains.jpg" />