Css box shadow filter

filter

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions, such as blur() and contrast() , are available to help you achieve predefined effects.

Try it

Syntax

/* values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* URL */ filter: url("filters.svg#filter-id"); /* Multiple filters */ filter: contrast(175%) brightness(3%); filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue); /* Use no filter */ filter: none; /* Global values */ filter: inherit; filter: initial; filter: revert; filter: revert-layer; filter: unset; 

With a function, use the following:

You can use url() to reference an SVG filter element. For a reference to an SVG element, use the following syntax:

filter: url(file.svg#filter-element-id); 

Functions

The filter property is specified as none or one or more of the functions listed below. If the parameter for any function is invalid, the function returns none . Except where noted, the functions that take a value expressed with a percent sign (as in 34% ) also accept the value expressed as decimal (as in 0.34 ).

When the filter property values contains multiple functions, the filters are applied in order.

Applies a Gaussian blur to the input image.

Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with 0% creating a completely black image, 100% having no effect, and values over 100% brightening the image.

Adjusts the contrast of the input image. A value of 0% makes the image grey, 100% has no effect, and values over 100% create a contrast.

Applies the parameter as a drop shadow, following the contours of the image. The shadow syntax is similar to (defined in the CSS backgrounds and borders module), with the exception that the inset keyword and spread parameter are not allowed. As with all filter property values, any filters after the drop-shadow() are applied to the shadow.

filter: drop-shadow(16px 16px 10px black); 

Converts the image to grayscale. A value of 100% is completely grayscale. The initial value of 0% leaves the input unchanged. Values between 0% and 100% produce linear multipliers on the effect.

Applies a hue rotation. The value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of 0deg leaves the input unchanged.

Inverts the samples in the input image. A value of 100% completely inverts the image. A value of 0% leaves the input unchanged. Values between 0% and 100% have linear multipliers on the effect.

Applies transparency. 0% makes the image completely transparent and 100% leaves the image unchanged.

Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.

Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.

Combining functions

You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared. The following example enhances the contrast and brightness of the image:

filter: contrast(175%) brightness(103%); 

Interpolation

When animated, if both the beginning and end filters have a function list of the same length without url() in the same order, each of their filter functions is interpolated according to the filter function’s specific rules.

If the filter lists are of different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list. The added functions use their initial, no filter modification values. All the filters listed are then interpolated according to the filter function’s specific rules. Otherwise, discrete interpolation is used.

Formal definition

Initial value	none
Applies to	all elements; In SVG, it applies to container elements excluding the element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	a filter function list

Formal syntax

filter =
none |

=
[ | ]+

=
|
|
|
|
|
|
|
|
|

=
url( * ) |
src( * )

=
blur( ? )

=
brightness( [ | ]? )

=
contrast( [ | ]? )

=
drop-shadow( [ ? && ] )

=
grayscale( [ | ]? )

=
hue-rotate( [ | ]? )

=
invert( [ | ]? )

=
opacity( [ | ]? )

=
sepia( [ | ]? )

=
saturate( [ | ]? )

Examples

Applying filter functions

The filter property is applied to the second image, greying and blurring both the image and its border.

img  border: 5px solid yellow; > /* Gray the second image by 40% and blur by 5px */ img:nth-of-type(2)  filter: grayscale(0.4) blur(5px); > 

img src="pencil.jpg" alt="Original image is sharp" /> img src="pencil.jpg" alt="The image and border are blurred and muted" /> 

Repeating filter functions

Filter functions are applied in order of appearance. The same filter function can be repeated.

#MDN-logo  border: 1px solid blue; filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 red); > 

svg id="MDN-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 104.2" xml:space="preserve" role="img"> title>MDN Web Docstitle> path d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" style="fill: var(--text-primary);">path> g style="fill:blue;"> path d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z">path> g> svg> 

The filters are applied in order. This is why the drop shadows are not the same color: the first drop shadow’s hue is altered by the hue-rotate() function but the second one is not.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS backdrop-filter property
• CSS compositing and blending module, including the CSS background-blend-mode and mix-blend-mode properties.
• The CSS mask property
• SVG, including the SVG element and SVG filter attribute.
• Applying SVG effects to HTML content

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Свойство CSS box-shadow против фильтра drop-shadow filter: Подробное сравнение

В последнее время было много разговоров насчет того, чем отличаются свойство CSS box-shadow и фильтр drop-shadow CSS . Первое используется уже в течение длительного времени и хорошо поддерживается в современных браузерах; последний является переводом SVG в CSS и в настоящее время имеет поддержку в Chrome , Firefox и Safari . На первый взгляд методы создания с помощью CSS тени блока и с помощью фильтров дают тот же результат: даже синтаксис у них очень похож.

Но как мы увидим, между ними существуют весьма значительные различия:

В этой статье будет приведено их полное сравнение: гибкость, скорость вывода и качество. Для ясности различные вендорные префиксы мы рассматривать не будем:

border-image:url(gold-picture-frame.png) 81 83 82 84; border-width: 60px; filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);

Самая замечательная особенность теней внутри блока CSS , созданных с помощью фильтров, заключается в том, что они очерчивают явные контуры элементов. box-shadow отражает прямоугольную форму изображения без учета альфа-маски; тень-фильтр полностью соответствует контуру PNG-изображения .

Это также справедливо для border-images , при условии, что изображение рамки является PNG с альфа-маской.

Фильтр drop-shadow учитывает добавление таких псевдо-элементов, как :before и :after . Обратите внимание, что в версии с фильтром тень повторяет форму треугольника:

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);

box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

Ограничения фильтра drop-shadow

Недостатки использования фильтра:

• Чтобы создавать такую объемную тень внизу блока CSS , как с помощью box-shadow , фильтр drop-shadow должен поддерживать четвертое значение spread . Но в текущей реализации Webkit box shadow четвертое значение будет расцениваться как ошибка, и тень в этом случае не выводится вообще;
• Спецификация фильтра не поддерживает значение inset , поэтому с помощью кода фильтра вы не сможете легко создавать внутреннюю тень.

Другие различия

Оба эффекта тени учитывают border-radius и transform . Но CSS тень блока снизу, созданная с помощью фильтра, будет выводиться под элементом, не учитывая фон, в то время как box-shadow будет учитывать сплошной фон элемента. Если граница неоднородная ( например, пунктирная ), фильтр будет учитывать это, а box-shadow нет:

border: 3px solid #262b57; width: 150px; height:150px; border-radius: 10px; transform: rotate(8deg); box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);

border: 3px dashed #262b57; box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);

Так как фильтр создает тень по бокам блока CSS только для рамки ( которая в данном случае имеет толщину всего в четыре пикселя ), то версия тени с помощью фильтра выглядит светлее.

Вердикт

Фильтр ( drop-shadow ), безусловно, является победителем в этом раунде: он имеет большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.

Скорость и качество

Качество отображения теней, полученных с помощью этих двух способов, примерно одинаково. Фильтры drop-shadow имеют преимущество аппаратного ускорения, если браузер поддерживает его; box-shadow не имеет доступа к нему. При других равных условиях фильтр drop-shadow CSS внутреннюю тень блока выводит быстрее.

Вывод

На данном этапе мы можем установить несколько простых правил:

• если элемент является сплошным и имеет сплошную рамку, тогда box-shadow . Это свойство имеет лучшую поддержку, и будет давать тот же визуальный результат, что фильтр и drop-shadow , хотя и на несколько миллисекунд медленнее;
• если вам нужно создать внутреннюю тень — также box-shadow .

Если у вас есть PNG -изображение с альфа-маской, существует несколько вариантов реализации:

• Создайте тени с помощью Photoshop , чтобы все браузеры отображали их одинаково;
• Оставьте изображение без изменения и используйте фильтр drop-shadow , учитывая, что на данный момент только Webkit-браузеры будут выводить эту тень.
• Попробуйте применить к контенту SVG-фильтр drop-shadow , чтобы тень одинаково распознавалась в других браузерах.

Если элемент имеет неоднородный контур, который не задается с помощью border-radius , почему бы не создать CSS тень вокруг блока с помощью обоих методов?

Webkit будет » дублировать » тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow .

Как видите, эти два способа во многом отличаются друг от друга. Надеюсь, эта статья поможет вам решить, какой из них использовать в своих проектах.

Вадим Дворников автор-переводчик статьи « box-shadow property vs. drop-shadow filter: a complete comparison »

Источник