{"id":3431,"date":"2020-06-06T20:04:15","date_gmt":"2020-06-06T17:04:15","guid":{"rendered":"http:\/\/www.coding-dude.com\/wp\/?p=3431"},"modified":"2021-09-14T20:07:23","modified_gmt":"2021-09-14T17:07:23","slug":"css-image-effects","status":"publish","type":"post","link":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/","title":{"rendered":"7 CSS Image Effects For Making Awesome Vintage Photos"},"content":{"rendered":"<div class=\"9db0862b9cf2e44f8d962262c5a80491\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-3421619882899259\";\r\n\/* Coding Dude Medium Banner *\/\r\ngoogle_ad_slot = \"2969896483\";\r\ngoogle_ad_width = 468;\r\ngoogle_ad_height = 60;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo.<\/p>\n<p>I&#8217;m a photographer myself, so, I like to think that along my <a href=\"\/\/www.textures4photoshop.com\/blog\/photographer-journey-beginner-pro-rules-tips\/\">photography journey<\/a> over the years I&#8217;ve learned a thing or two about image effects.<\/p>\n<p>The CSS image effects I will demonstrate are:<\/p>\n<ol>\n<li>Old Paper Overlay<\/li>\n<li>Black and White<\/li>\n<li>Sepia<\/li>\n<li>Warm Colors<\/li>\n<li>Cold Colors<\/li>\n<li>Green Tint<\/li>\n<li>Magenta Tint<\/li>\n<\/ol>\n<p>Though you can use tools like Photoshop, Lightroom or online tools like MockoFun and their awesome <a href=\"https:\/\/www.mockofun.com\/tutorials\/vintage-photo-editor\/\">vintage photo editor<\/a> to edit your photos, if you only need to place an image in a web page and apply a filter, here&#8217;s how to create cool CSS image effects.<\/p>\n<blockquote><p><strong>NOTE:<\/strong> One disadvantage of using images with CSS effects is that Google does not see the image with the applied effect. For the purpose of this tutorial, the images below are screenshots of the CSS image effects applied to the original image. They are<strong> NOT the live CSS effect<\/strong>. If you want to see or play around with the live effects please check this CodePen:<\/p><\/blockquote>\n<p class='codepen'  data-height='300' data-theme-id='16997' data-slug-hash='bGVXqam' data-default-tab='html,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Simple CSS Image Effects by Ion Emil Negoita (@inegoita) on CodePen.<\/p>\n\n<h2>CSS Image Effects using CSS <code>filter<\/code><\/h2>\n<p>The\u00a0<code>filter<\/code> CSS property is a very useful tool when you need to make image adjustments like adjusting the contrast, brightness, saturation etc of images in a web page.<\/p>\n<p>Here&#8217;s a list of values that you can use with <code>filter<\/code> in CSS:<\/p>\n<ul>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">blur<\/span><\/code> for adding blur to images<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">brightness<\/span><\/code> for making the image brighter or darker<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">contrast<\/span><\/code> adjust the contrast of an image<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">drop-shadow<\/span><\/code> use as an alternative to\u00a0<code>box-shadow<\/code><\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">grayscale<\/span><\/code> for transforming your image to gray scale<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">hue-rotate<\/span><\/code> adjust hue values for your photo<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">invert<\/span><\/code> inverts the colors of the image<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">opacity<\/span><\/code> alter the transparency of the image<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">saturate<\/span><\/code> alter the saturation values of your image<\/li>\n<li class=\"brush:css no-line-numbers language-css\"><code class=\" language-css\"><span class=\"token function\">sepia<\/span><\/code> apply a sepia effect to the image<\/li>\n<\/ul>\n<p>These CSS filters take in values (either percent or pixels in the case of\u00a0<code>blur<\/code> for example). Also, you can apply combinations of these filters to the same image element (or any other HTML element for that matter).<\/p>\n<p>So, let&#8217;s see the CSS <code>filter<\/code> property in action!<\/p>\n<h2>CSS Image Effects: Original Photo<\/h2>\n<p>Ok, so let&#8217;s take this image of an old Volkswagen Beetle I think<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-3443\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/ouDwClz1.jpg\" alt=\"CSS Image Effect\" width=\"1024\" height=\"655\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/ouDwClz1.jpg 1024w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/ouDwClz1-300x192.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/ouDwClz1-768x491.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Let&#8217;s apply some cool CSS image effects on it using various values of the <code>filter<\/code> property.<\/p>\n<p>To create a more vintage effect we&#8217;ll also use this <a href=\"https:\/\/www.photoshopsupply.com\/patterns-textures\/vintage-paper-textures\">old texture<\/a> from <strong>Vintage Paper Textures<\/strong> free pack by <a href=\"https:\/\/www.photoshopsupply.com\/\">PhotoshopSupply<\/a>. You can also check out this <a href=\"\/\/www.psd-dude.com\/tutorials\/resources\/beautiful-old-paper-textures.aspx\">old paper background<\/a> collection of over 150 different vintage textures.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" title=\"Old Texture CSS Image Effect\" src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\" alt=\"Old Texture CSS Image Effect\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>CSS Image Effects: Vintage Overlay<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-3436\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-1.jpg\" alt=\"CSS Image Effect Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-1.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-1-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-1-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-1-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n&lt;img class=\"original-image\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n&lt;div class=\"overlay\"&gt;\r\n&lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.old-paper{\r\n  position:relative;\r\n  max-width:850px;\r\n}\r\n\r\n.original-image{\r\n  width:100%;\r\n  height:100%;\r\n  display:inline-block;\r\n}\r\n.overlay{\r\n  mix-blend-mode:multiply;\r\n  position:absolute;\r\n  display:inline-block;\r\n  left:0;\r\n  top:0;\r\n  right:0;\r\n  bottom:0;\r\n}\r\n\r\n.overlay img{\r\n  width:100%;\r\n  height:100%;\r\n}<\/code><\/pre>\n<p>For this vintage image effect I simply added the old paper texture over the original image and set the\u00a0<code>mix-blend-mode<\/code> to <code>multiply<\/code>. If you are familiar with blending modes in Photoshop then this is pretty straight forwards to understand.<\/p>\n<p>If not, the short explanation for blending modes is that they allow applying a math calculation on the colors between 2 images. You have to imagine each pixel color as a red, green, blue values from 0 to 1 (0,0,0 being black and 1,1,1 being white). In this case <code>multiply<\/code> will multiply the color components for each pixel and the result will be the color for the pixel displayed.<\/p>\n<p>For the next CSS image effects I will use the same exact code, but in addition, I will apply different filters to the original image.<\/p>\n<p>Let&#8217;s go on.<\/p>\n<h2>CSS Image Effects: Black and White<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3437\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-2.jpg\" alt=\"CSS Image Effect Black And White Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-2.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-2-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-2-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-2-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image black-and-white\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.black-and-white{\r\n  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);\r\n}<\/code><\/pre>\n<p>Adding the CSS class name <code>.black-and-white<\/code> to the original image adds the black and white effect. If we look into the CSS code we can see the sequence of filter values:<\/p>\n<ul>\n<li><code>brightness(70%)<\/code> dims the brightness of the image to 70% of the original<\/li>\n<li><code>contrast(150%)<\/code> increases the contrast of the image by 50%<\/li>\n<li><code>saturate(0%)<\/code> this totally de-saturates the colors of the original image<\/li>\n<li><code>brightness(150%)<\/code> we bring up the brightness of the image by 50% of the result<\/li>\n<\/ul>\n<p>Please keep in mind that the\u00a0<code>filter<\/code> property values are applied in a sequence, meaning that the input for one filter is the output of the previous filter.<\/p>\n<p>Let&#8217;s now see the settings for a sepia filter effect.<\/p>\n<h2>CSS Image Effects: Sepia<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3438\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-3.jpg\" alt=\"CSS Image Effect Sepia Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-3.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-3-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-3-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-3-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image sepia\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.sepia{\r\n  filter:filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);\r\n}<\/code><\/pre>\n<p>There is a\u00a0<code>sepia<\/code> filter built into CSS, but I find the result a bit boring, so I decided to do a few tweaks.<\/p>\n<p>I de-saturate the image to make it black and white, apply the sepia filter, increase the contrast by 50% and then increase the saturation of the resulting image by 50%.<\/p>\n<p>I&#8217;m pretty happy with the result. Please note, that for your images, the results might differ, so play with the settings until you get the result you want.<\/p>\n<h2>CSS Image Effects: Warm Colors<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3439\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-4.jpg\" alt=\"CSS Image Effect Warm Color Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-4.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-4-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-4-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-4-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image warm\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.sepia{\r\n  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);\r\n}<\/code><\/pre>\n<p>The warm color image effect is used often by photographers to make photos more appealing. To make the image &#8220;warmer&#8221; we need to shift the colors towards red, orange and yellow.<\/p>\n<p>This might take some experimentation, but what worked for me in this case was a combination of the <code>sepia<\/code> filter and the\u00a0<code>hue-rotate<\/code> filter.<\/p>\n<p>We&#8217;ve seen what the\u00a0<code>sepia<\/code> filter does. How about\u00a0<code>hue-rotate<\/code>?<\/p>\n<p><code>hue-rotate<\/code> shifts the hue of all the colors in the image. But why is the value in degrees?<\/p>\n<p>Imagine the color wheel (actually, don&#8217;t imagine it, here it is)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3448\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/color-wheel.jpg\" alt=\"Color Wheel\" width=\"350\" height=\"350\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/color-wheel.jpg 350w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/color-wheel-300x300.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/color-wheel-150x150.jpg 150w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/p>\n<p>Using\u00a0<code>hue-rotate<\/code> you can push one color by x degrees on the color wheel. 360 degrees will make a complete rotation, which will mean no change at all. The value for this property also works in the negatives and -90 for example is the equivalent of 270.<\/p>\n<h2>CSS Image Effects: Cold Colors<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3440\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-5.jpg\" alt=\"CSS Image Effect Cold Colors Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-5.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-5-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-5-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-5-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image cold\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.cold{\r\n  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);\r\n}<\/code><\/pre>\n<p>Cold colors are more towards blue and cyan. The difference from our warm colors CSS effect is that sepia was already in the warm area. So, to overcome that problem, we first use the\u00a0<code>hue-rotate<\/code> to do a 180 shift before we apply the\u00a0<code>sepia<\/code> filter.<\/p>\n<p>This will create a sepia effect (warm tones) with the colors replaced by their complementary colors (that&#8217;s what you call colors on opposite sides of the color wheel). So, doing a\u00a0<code>hue-rotate<\/code> again by 180 at the end, will restore the colors to their original hue plus a reversed sepia effect which makes everything more blue, therefore colder.<\/p>\n<p>I hope you got that!<\/p>\n<p>If not, just drop me a comment below and I&#8217;ll get back to you.<\/p>\n<h4>Just a quick tip, using these photo effect on images is great. But, to make a really cool effect you can add some text on top of the image. You can do that in a photo editor, or you can even do it in online tools. For example, add your name on a photo with these <a href=\"https:\/\/www.mockofun.com\/templates\/name-on-image\/\">name on image<\/a> pre-made templates.<\/h4>\n<p>On with our image effects.<\/p>\n<h2>CSS Image Effects: Green Color Tint<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3441\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-6.jpg\" alt=\"CSS Image Effect Green Tint Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-6.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-6-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-6-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-6-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image tint-green\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.tint-green{\r\n  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);\r\n}<\/code><\/pre>\n<p>In color theory a color tint refers to a color to which you add pure white. In photography, color tinting refers to adding a bit a certain colors to all colors in the photo.<\/p>\n<p>For this tint image effect I used the same principle as for the warm\/cold color effects to add a green tint to the original image.<\/p>\n<p>After some experiments, I came up with the 30 degrees offset used in the\u00a0<code>hue-rotate<\/code> filter, which has to do with the distance between the yellow hue of the sepia filter and the green tint we want to apply.<\/p>\n<h2>CSS Image Effects: Magenta Color Tint<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3442\" src=\"\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-7.jpg\" alt=\"CSS Image Effect Magenta Tint Vintage\" width=\"850\" height=\"567\" srcset=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-7.jpg 850w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-7-300x200.jpg 300w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-7-768x512.jpg 768w, https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effect-overlay-7-720x480.jpg 720w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><strong>HTML Code:<\/strong><\/p>\n<pre><code>&lt;div class=\"old-paper\"&gt;\r\n    &lt;img class=\"original-image tint-magenta\" src=\"https:\/\/i.imgur.com\/ouDwClz.jpg\" \/&gt;\r\n    &lt;div class=\"overlay\"&gt;\r\n      &lt;img src=\"https:\/\/i.imgur.com\/4rKVgAQ.png\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS Code:<\/strong><\/p>\n<pre><code>.tint-magenta{\r\n  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);\r\n}<\/code><\/pre>\n<p>Same idea as for the green color tint effect, but this time with a value of 270 degrees for the\u00a0<code>hue-rotate<\/code>.<\/p>\n<h2>Credits<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.photoshopsupply.com\/patterns-textures\/vintage-paper-textures\">Old Texture<\/a> image provided by <a href=\"https:\/\/www.photoshopsupply.com\/\">PhotoshopSupply.com<\/a><\/li>\n<\/ul>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo. I&#8217;m a photographer myself, so, I like [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149],"tags":[350,347,348,349],"class_list":["post-3431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-filters","tag-image-effects","tag-svg","tag-svg-filters"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude\" \/>\n<meta property=\"og:description\" content=\"In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo. I&#8217;m a photographer myself, so, I like [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Coding Dude\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-06T17:04:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T17:07:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Negoita\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingdudecom\" \/>\n<meta name=\"twitter:site\" content=\"@codingdudecom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Negoita\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/\"},\"author\":{\"name\":\"John Negoita\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/person\\\/29b7100b9ec7bb332359bd9fcba98370\"},\"headline\":\"7 CSS Image Effects For Making Awesome Vintage Photos\",\"datePublished\":\"2020-06-06T17:04:15+00:00\",\"dateModified\":\"2021-09-14T17:07:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/\"},\"wordCount\":1320,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/css-image-effects.jpg\",\"keywords\":[\"filters\",\"image effects\",\"svg\",\"svg filters\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/\",\"name\":\"7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/css-image-effects.jpg\",\"datePublished\":\"2020-06-06T17:04:15+00:00\",\"dateModified\":\"2021-09-14T17:07:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/css-image-effects.jpg\",\"contentUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/css-image-effects.jpg\",\"width\":1024,\"height\":479,\"caption\":\"CSS Image Effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/css\\\/css-image-effects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 CSS Image Effects For Making Awesome Vintage Photos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\",\"name\":\"Coding Dude\",\"description\":\"Coding tutorials, tips and tricks\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#organization\",\"name\":\"Coding Dude\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/codingdude-logo-wide.jpg\",\"contentUrl\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/codingdude-logo-wide.jpg\",\"width\":226,\"height\":60,\"caption\":\"Coding Dude\"},\"image\":{\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/codingdudecom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.coding-dude.com\\\/wp\\\/#\\\/schema\\\/person\\\/29b7100b9ec7bb332359bd9fcba98370\",\"name\":\"John Negoita\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g\",\"caption\":\"John Negoita\"},\"description\":\"I'm a Java programmer, been into programming since 1999 and having tons of fun with it.\",\"sameAs\":[\"http:\\\/\\\/www.coding-dude.com\",\"https:\\\/\\\/x.com\\\/codingdudecom\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/","og_locale":"en_US","og_type":"article","og_title":"7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude","og_description":"In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo. I&#8217;m a photographer myself, so, I like [&hellip;]","og_url":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/","og_site_name":"Coding Dude","article_published_time":"2020-06-06T17:04:15+00:00","article_modified_time":"2021-09-14T17:07:23+00:00","og_image":[{"width":1024,"height":479,"url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","type":"image\/jpeg"}],"author":"John Negoita","twitter_card":"summary_large_image","twitter_creator":"@codingdudecom","twitter_site":"@codingdudecom","twitter_misc":{"Written by":"John Negoita","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#article","isPartOf":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/"},"author":{"name":"John Negoita","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/person\/29b7100b9ec7bb332359bd9fcba98370"},"headline":"7 CSS Image Effects For Making Awesome Vintage Photos","datePublished":"2020-06-06T17:04:15+00:00","dateModified":"2021-09-14T17:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/"},"wordCount":1320,"commentCount":3,"publisher":{"@id":"https:\/\/www.coding-dude.com\/wp\/#organization"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","keywords":["filters","image effects","svg","svg filters"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/","url":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/","name":"7 CSS Image Effects For Making Awesome Vintage Photos - Coding Dude","isPartOf":{"@id":"https:\/\/www.coding-dude.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","datePublished":"2020-06-06T17:04:15+00:00","dateModified":"2021-09-14T17:07:23+00:00","breadcrumb":{"@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#primaryimage","url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","contentUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","width":1024,"height":479,"caption":"CSS Image Effects"},{"@type":"BreadcrumbList","@id":"https:\/\/www.coding-dude.com\/wp\/css\/css-image-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.coding-dude.com\/wp\/"},{"@type":"ListItem","position":2,"name":"7 CSS Image Effects For Making Awesome Vintage Photos"}]},{"@type":"WebSite","@id":"https:\/\/www.coding-dude.com\/wp\/#website","url":"https:\/\/www.coding-dude.com\/wp\/","name":"Coding Dude","description":"Coding tutorials, tips and tricks","publisher":{"@id":"https:\/\/www.coding-dude.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.coding-dude.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.coding-dude.com\/wp\/#organization","name":"Coding Dude","url":"https:\/\/www.coding-dude.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2018\/05\/codingdude-logo-wide.jpg","contentUrl":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2018\/05\/codingdude-logo-wide.jpg","width":226,"height":60,"caption":"Coding Dude"},"image":{"@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/codingdudecom"]},{"@type":"Person","@id":"https:\/\/www.coding-dude.com\/wp\/#\/schema\/person\/29b7100b9ec7bb332359bd9fcba98370","name":"John Negoita","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d51d5d54d4c51f0a7bfe39333bd98cfc5245ab49433be692fce26b741c08181e?s=96&d=mm&r=g","caption":"John Negoita"},"description":"I'm a Java programmer, been into programming since 1999 and having tons of fun with it.","sameAs":["http:\/\/www.coding-dude.com","https:\/\/x.com\/codingdudecom"]}]}},"jetpack_featured_media_url":"https:\/\/www.coding-dude.com\/wp\/wp-content\/uploads\/2020\/05\/css-image-effects.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/comments?post=3431"}],"version-history":[{"count":18,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"predecessor-version":[{"id":3751,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/posts\/3431\/revisions\/3751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/media\/3447"}],"wp:attachment":[{"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/categories?post=3431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.coding-dude.com\/wp\/wp-json\/wp\/v2\/tags?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}