Цветные SVG фильтры для элементов

27.04.2022

4624

Примеры наложения SVG фильтра на <div> c содержимым через CSS-свойство filter.

Черно белый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blackwhite">
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.94"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.93"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.88"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-blackwhite);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Фиолетовый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-violet">
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.19 0.57"></feFuncR>
			<feFuncG type="table" tableValues="0.037 0.84"></feFuncG>
			<feFuncB type="table" tableValues="0.25 0.98"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>  
</svg>

HTML

.box {
	filter: url(#filter-violet);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Синий фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blue">	
		<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0"></feFuncR>
			<feFuncG type="table" tableValues="0.15 0.38"></feFuncG>
			<feFuncB type="table" tableValues="0.23 0.57"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-blue);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Голубой фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-blue">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.25 0.61"></feFuncR>
			<feFuncG type="table" tableValues="0.13 0.93"></feFuncG>
			<feFuncB type="table" tableValues="0.94 0.88"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-blue);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Зеленый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-green">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.16"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.65"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.54"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-green);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-red">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
			<feFuncR type="table" tableValues="0 0.93"></feFuncR>
			<feFuncG type="table" tableValues="0.11 0.19"></feFuncG>
			<feFuncB type="table" tableValues="0.40 0.14"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer> 
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-red);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Розовый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-pink">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0.92 0.99"></feFuncR>
			<feFuncG type="table" tableValues="0.24 0.78"></feFuncG>
			<feFuncB type="table" tableValues="0.64 0.42"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-pink);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Оранжевый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-orange">	
		<feColorMatrix type="matrix" result="gray"values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.98"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.48"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.31"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-orange);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS

Результат:

Желтый фильтр

HTML
CSS

<div class="box">
	<h1>Page header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" hedden>
	<filter id="filter-yellow">	
		<feColorMatrix type="matrix" result="gray" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
		<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
			<feFuncR type="table" tableValues="0 0.95"></feFuncR>
			<feFuncG type="table" tableValues="0.14 0.59"></feFuncG>
			<feFuncB type="table" tableValues="0.21 0.13"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
	</filter>
</svg>

HTML

.box {
	filter: url(#filter-yellow);
	width: 100%;
	height: 450px;
	background: url(https://snipp.ru/demo/337/img.jpg) 50% 50% no-repeat;
	background-size: cover;
}
.box:hover {
	filter: none;
}

h1 {
	color: red;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	font-size: 50px;
}
p {
	color: #fff;
	font-size: 20px;
	padding: 5px 20px;
}

CSS