filter: blur()
En esta página
| Clase | Propiedades CSS |
|---|---|
blur-xs |
filter: blur(var(--blur-xs)); /* 4px */ |
blur-sm |
filter: blur(var(--blur-sm)); /* 8px */ |
blur-md |
filter: blur(var(--blur-md)); /* 12px */ |
blur-lg |
filter: blur(var(--blur-lg)); /* 16px */ |
blur-xl |
filter: blur(var(--blur-xl)); /* 24px */ |
blur-2xl |
filter: blur(var(--blur-2xl)); /* 40px */ |
blur-3xl |
filter: blur(var(--blur-3xl)); /* 64px */ |
blur-none |
filter: ; |
blur-(<custom-property>) |
filter: blur(var(<custom-property>)); |
blur-[<value>] |
filter: blur(<value>); |
Examples#
Basic example#
Use utilities like blur-sm and blur-lg to blur an element:
{
blur-none
blur-sm
blur-lg
blur-2xl
<!-- [!code classes:blur-none,blur-sm,blur-lg,blur-2xl] -->
<img class="blur-none" src="/img/mountains.jpg" />
<img class="blur-sm" src="/img/mountains.jpg" />
<img class="blur-lg" src="/img/mountains.jpg" />
<img class="blur-2xl" src="/img/mountains.jpg" />