Фильтры Instagram на CSS

08.04.2018

7224

Сборник CSS стилей с эффектом фильтров Инстаграма.

Фильтр Clarendon

Делает цвета осветленными и более интенсивными.

<figure class="clarendon">
	<img src="/img.jpg">
</figure>

<style>
.clarendon {
	line-height: 0;
	position: relative;
	filter: contrast(120%) saturate(125%);
}
.clarendon::before {
	content: "";  
	display: block;  
	width: 100%; 
	height: 100%;  
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(127, 187, 227, 0.2);
	pointer-events: none;
	mix-blend-mode: overlay;	
}
</style>

HTML

Фильтр Gingham

Добавляет размытие и желтоватый тон.

<figure id="retrace" class="gingham">
	<img src="/img.jpg">
</figure>

<style>
.gingham {
	line-height: 0;
	position: relative;
	-webkit-filter: brightness(105%) hue-rotate(350deg);
	filter: brightness(105%) hue-rotate(350deg);
}
.gingham::before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	pointer-events: none;
	mix-blend-mode: darken;
	background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(0, 0, 0, 0));
	background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(0, 0, 0, 0));
}
</style>

HTML

Фильтр Reyes

Винтажный фильтр, осветляет фото и уменьшает насыщенность цветов.

<figure class="reyes">
	<img src="/img.jpg">
</figure>

<style>
.reyes {
	line-height: 0;
	position: relative;
	filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
	-webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);	
}
.reyes::before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	opacity: 0.5;
	background: rgba(173, 205, 239, 1);
	pointer-events: none;
	mix-blend-mode: soft-light;	
}
</style>

HTML

Фильтр Aden

Добавляет эффект дымки и приглушает цвета.

<figure class="aden">
	<img src="/img.jpg">
</figure>

<style>
.aden {
	line-height: 0;
	position: relative;
	filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);	
	-webkit-filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);
}
.aden::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
	background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
	pointer-events: none;
	mix-blend-mode: darken;	
}
</style>

HTML

Фильтр Perpetua

Добавляет к фото яркости и зеленого свечения, уменьшает тени.

<figure class="perpetua">
	<img src="/img.jpg">
</figure>

<style>
.perpetua {
	line-height: 0;
	position: relative;
}
.perpetua::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	opacity: 0.5;
	background: -webkit-linear-gradient(to bottom, rgba(0, 91, 154, 1) 1, rgba(61, 193, 230, 0));
	background: linear-gradient(to bottom, rgba(0, 91, 154, 1), rgba(61, 193, 230, 0));
	pointer-events: none;
	mix-blend-mode: soft-light;	
}
</style>

HTML

Фильтр Amaro

Осветляет центр фото.

<figure class="amaro">
	<img src="/img.jpg">
</figure>

<style>
.amaro {
	filter: contrast(90%) brightness(110%) saturate(150%) hue-rotate(-10deg);	
	-webkit-filter: contrast(90%) brightness(110%) saturate(150%) hue-rotate(-10deg);
}
</style>

HTML

Фильтр Hudson

Смещает оттенки в синюю часть спектра и ослабляет центр фотографии.

<figure class="hudson">
	<img src="/img.jpg">
</figure>

<style>
.hudson {
	line-height: 0;
	position: relative;
	filter: contrast(90%) brightness(120%) saturate(110%);	
	-webkit-filter: contrast(90%) brightness(120%) saturate(110%);
}
.hudson::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5;
	background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 177, 166, 1) 50, rgba(52, 33, 52, 1));
	background: radial-gradient(50% 50%, circle closest-corner, rgba(255, 177, 166, 1) 50, rgba(52, 33, 52, 1));
	pointer-events: none;
	mix-blend-mode: multiply;	
}
</style>

HTML

Фильтр Valencia

Увеличивает экспозицию и добавляет фотографии теплые цвета делая фотографию похожей на снимок из 1980-х годов.

<figure class="valencia">
	<img src="/img.jpg">
</figure>

<style>
.valencia {
	line-height: 0;
	position: relative;
	filter: contrast(108%) brightness(108%) sepia(8%);	
	-webkit-filter: contrast(108%) brightness(108%) sepia(8%);
}
.valencia::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	opacity: 0.5;
	background: rgba(58, 3, 57, 1);
	pointer-events: none;
	mix-blend-mode: exclusion;	
}
</style>

HTML

Фильтр X-Pro ll

Добавляет яркость и придает теплые тона.

<figure class="x-pro-2">
	<img src="/img.jpg">
</figure>

<style>
.x-pro-2 {
	line-height: 0;
	position: relative;
	filter: sepia(30%);	
	-webkit-filter: sepia(30%);
}
.x-pro-2::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));
	background: radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));
	pointer-events: none;
	mix-blend-mode: color-burn;	
}
</style>

HTML

Фильтр Lo-Fi

Добавляет изображению насыщенности и контраста, подчеркивает тени.

<figure class="lo-fi">
	<img src="/img.jpg">
</figure>

<style>
.lo-fi {
	line-height: 0;
	position: relative;
	filter: contrast(150%) saturate(110%);	
	-webkit-filter: contrast(150%) saturate(110%);
}
.lo-fi::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
	background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
	pointer-events: none;
	mix-blend-mode: multiply;	
}
</style>

HTML

Фильтр Inkwell

Обесцвечивает фотографию.

<figure class="inkwell">
	<img src="/img.jpg">
</figure>

<style>
.inkwell {
	line-height: 0;
	position: relative;
	-webkit-filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
	filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
}
.inkwell::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;	
}
</style>

HTML

Фильтр Toaster

Делает центр снимка выцветшим, смещая спектр к пурпурным оттенкам отсылающим к фотографиям 1980-х годов.

<figure class="toaster">
	<img src="/img.jpg">
</figure>

<style>
.toaster {
	line-height: 0;
	position: relative;
	filter: contrast(150%) brightness(90%);	
	-webkit-filter: contrast(150%) brightness(90%);
}
.toaster::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	opacity: 0.5;
	background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
	background: radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
	pointer-events: none;
	mix-blend-mode: screen;	
}
</style>

HTML

Фильтр Walden

Высветляет центр изображения и делает фото более желтым.

<figure class="walden">
	<img src="/img.jpg">
</figure>

<style>
.walden {
	line-height: 0;
	position: relative;
	filter: brightness(110%) saturate(160%) sepia(30%) hue-rotate(350deg);	
	-webkit-filter: brightness(110%) saturate(160%) sepia(30%) hue-rotate(350deg);
}
.walden::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;	
	top: 0;
	left: 0;
	opacity: 0.3;
	background: rgba(204, 68, 0, 1);
	pointer-events: none;
	mix-blend-mode: screen;	
}
</style>

HTML

Фильтр 1977

Подчеркивает красные оттенки, делая при этом картинку выцветшей. Примерно так выглядели фото в конце 1970-х.

<figure class="f-1977">
	<img src="/img.jpg">
</figure>

<style>
.f-1977 {
	line-height: 0;
	position: relative;
	filter: contrast(110%) brightness(110%) saturate(130%);	
	-webkit-filter: contrast(110%) brightness(110%) saturate(130%);
}
.f-1977::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(243, 106, 188, 0.3);
	pointer-events: none;
	mix-blend-mode: screen;	
}
</style>

HTML

Фильтр Stinson

Вымывает цвета и осветляет изображение.

<figure class="stinson">
	<img src="/img.jpg">
</figure>

<style>
.stinson {
	line-height: 0;
	position: relative;
	filter: contrast(75%) brightness(115%) saturate(85%);
	-webkit-filter: contrast(75%) brightness(115%) saturate(85%);	
}
.stinson::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(240, 149, 128, 0.2);
	pointer-events: none;
	mix-blend-mode: soft-light;	
}
</style>

HTML

Фильтр Maven

Затемняет фото, подчеркивает тени и добавляет желтого оттенка.

<figure class="maven">
	<img src="/img.jpg">
</figure>

<style>
.maven {
	line-height: 0;
	position: relative;
	filter: contrast(95%) brightness(95%) saturate(150%) sepia(25%);	
	-webkit-filter: contrast(95%) brightness(95%) saturate(150%) sepia(25%);
}
.maven::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(3, 230, 26, 0.2);
	pointer-events: none;
	mix-blend-mode: hue;	
}
</style>

HTML

Фильтр Brooklyn

Подчеркивает зеленые оттенки.

<figure class="brooklyn">
	<img src="/img.jpg">
</figure>

<style>
.brooklyn {
	line-height: 0;
	position: relative;
	filter: contrast(90%) brightness(110%);	
	-webkit-filter: contrast(90%) brightness(110%);
}
.brooklyn::before {
	content: "";
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
	background: radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
	pointer-events: none;
	mix-blend-mode: overlay;	
}
</style>

HTML