{"id":16001,"date":"2018-08-27T12:57:42","date_gmt":"2018-08-27T12:57:42","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=16001"},"modified":"2025-12-30T17:24:40","modified_gmt":"2025-12-30T15:24:40","slug":"add-filter-effects-to-images","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/","title":{"rendered":"Beautify Your Images With Filter Effects and Blend Modes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"16001\" class=\"elementor elementor-16001\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-28ef9046 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"28ef9046\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6129b34d\" data-id=\"6129b34d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-573c3c85 elementor-widget elementor-widget-text-editor\" data-id=\"573c3c85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating striking visuals to captivate your visitors is something every web designer strives to accomplish. Various techniques can help designers achieve this goal. However, some approaches work better than others. When it comes to engaging visitors, nothing beats imagery \u2014 photos, images, illustrations, and videos can draw visitors faster than any other type of content. It\u2019s a known fact that the human brain processes visuals 60,000 times faster than it processes text. And the brain is also more accustomed to processing images \u2014 ninety percent of the information sent to the brain is visual.<\/p><p>To make a strong visual impression on visitors, designers need to select not only the right images, but also to spice them up with the right visual effects. You can create a unique vibe by applying a filter or a blend mode effect to the imagery. And what\u2019s particularly great about effects is that you can use them with existing images. In this article, I\u2019ll show you all the glory of blend modes and filters.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f06120 elementor-widget elementor-widget-heading\" data-id=\"9f06120\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/widgets\/gallery-widget\/\">Beautify your images using Elementor's Pro Gallery widget<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-024a28c elementor-widget elementor-widget-heading\" data-id=\"024a28c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Concept of Filters and Blend Modes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44426e4 elementor-widget elementor-widget-heading\" data-id=\"44426e4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Filters<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-510918ec elementor-widget elementor-widget-text-editor\" data-id=\"510918ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\"><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26843\">CSS<\/a> Filter Effects let you apply graphic effects like blur or color shifting to images. Elementor provides a list of settings that allow designers to create unique CSS filters.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-992195e elementor-widget elementor-widget-image\" data-id=\"992195e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"408\" height=\"1024\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=408,h=1024\/blog\/wp-content\/uploads\/2018\/08\/new-panel-408x1024.png\" class=\"attachment-large size-large wp-image-16277\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=408\/blog\/wp-content\/uploads\/2018\/08\/new-panel-408x1024.png 408w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=119\/blog\/wp-content\/uploads\/2018\/08\/new-panel-119x300.png 119w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=599\/blog\/wp-content\/uploads\/2018\/08\/new-panel.png 599w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d3fe27 elementor-widget elementor-widget-text-editor\" data-id=\"3d3fe27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Below you can see what happens if we play with various settings.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-849a56e elementor-widget elementor-widget-image\" data-id=\"849a56e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"337\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=337\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-1-1024x431.png\" class=\"attachment-large size-large wp-image-16007\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-1-1024x431.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-1-300x126.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-1-768x324.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-1.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78b6bb3 elementor-widget elementor-widget-text-editor\" data-id=\"78b6bb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First row: Normal, Blur (blur=10), brightness (brightness=200). Second row: contrast (contrast=200), saturation (saturation=0), opacity (opacity=0,1). Original image: <a href=\"https:\/\/unsplash.com\/photos\/KE0nC8-58MQ\">Carl Heyerdahl<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5596d75 elementor-widget elementor-widget-heading\" data-id=\"5596d75\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Blending Modes<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8aa4fd elementor-widget elementor-widget-text-editor\" data-id=\"a8aa4fd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Blend modes are one of the most frequently used effects in print and graphic design. Anyone who has ever worked with Photoshop or Illustrator is well familiar with this cool trick. By blending modes, you can define how two elements are combined.<\/span><\/p><p><span style=\"font-weight: 400\">There are <\/span><a href=\"http:\/\/www.w3.org\/TR\/compositing-1\/#blending\"><span style=\"font-weight: 400\">16 blending modes<\/span><\/a><span style=\"font-weight: 400\"> recommended by the W3C. Each mode uses a specific formula to mix the colors of the source and the destination. For example, Darken Blend Mode layers two pixels on top of each other and renders the darker of the two pixels.\u00a0<\/span><span>You can try this <\/span><a href=\"http:\/\/www.sarasoueidan.com\/demos\/css-blender\/\"><span>interactive demo<\/span><\/a><span> to explore different blending modes.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8548fd3 elementor-widget elementor-widget-image\" data-id=\"8548fd3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"401\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=401\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-2-1024x513.png\" class=\"attachment-large size-large wp-image-16010\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-2-1024x513.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-2-300x150.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-2-768x385.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1195\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-2.png 1195w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c1c627 elementor-widget elementor-widget-text-editor\" data-id=\"0c1c627\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">But even with a definition for each mode, it can be hard (if not impossible) to predict the results of applying these modes to an image. Choosing a suitable blend mode is a process of trial and error. If you\u2019re an Instagram user, you probably know how hard it is to find the right effect from the list of available options. Sometimes you need to explore every single option, applying them one after the other until you get the desired effect.<\/span><\/p><p><span style=\"font-weight: 400\">Elementor offers 13 blend modes: Normal (this is the default and has zero blend), Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color, Difference, Exclusion, Hue, and Luminosity. All of them are available in the Style section. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92e4c59 elementor-widget elementor-widget-image\" data-id=\"92e4c59\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"664\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=269,h=664\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-3.png\" class=\"attachment-large size-large wp-image-16012\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=269\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-3.png 269w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=122\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-3-122x300.png 122w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-80ee7c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"80ee7c9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29f30d9\" data-id=\"29f30d9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18ecc08 elementor-widget elementor-widget-heading\" data-id=\"18ecc08\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Three Filters and Seven Blend Modes to Spice up Your Images<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bec509c elementor-widget elementor-widget-text-editor\" data-id=\"bec509c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Charles Eames once said &#8220;The details are not the details. They make the design.&#8221; <\/span><\/p><p><span style=\"font-weight: 400\">It\u2019s true that after interacting with a product, people often remember some specific detail about that product. It might be a unique color combination, a delightfully animated effect or a neat logo. Great designers know that by focusing on details, it\u2019s possible to create a truly memorable experience.<\/span><\/p><p><span style=\"font-weight: 400\">Filters and blend modes help designers give your project personality. Experiment with some of the techniques below to revitalize ordinary images.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd2afad elementor-widget elementor-widget-heading\" data-id=\"bd2afad\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. Grayscale<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f28c95 elementor-widget elementor-widget-text-editor\" data-id=\"5f28c95\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Grayscale is one of the most commonly used filters. As the name suggests, this filter converts the image to grayscale by removing color from the picture. It\u2019s relatively easy to apply this filter using Elementor. All you need to do is to set the Saturation property to zero (which is available in the CSS Style section), and you\u2019ll get a completely black &amp; white image.<\/span><\/p><p><span style=\"font-weight: 400\">There are a few tricks designers use when working with a grayscale filter. First, it\u2019s possible to create a strong visual accent on a specific element using a black &amp; white background image and an object colored with a vibrant hue. In the following example, all eyes are on the site\u2019s headline.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9f3b7d elementor-widget elementor-widget-image\" data-id=\"d9f3b7d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"407\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=407\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-6.07.36-PM-1024x521.png\" class=\"attachment-large size-large wp-image-16015\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-6.07.36-PM-1024x521.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-6.07.36-PM-300x153.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-6.07.36-PM-768x391.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-6.07.36-PM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df17504 elementor-widget elementor-widget-text-editor\" data-id=\"df17504\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/readymag.com\/shuffle\/dieter-rams\/\"><i><span style=\"font-weight: 400\">Readymag<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses a bright color to direct user\u2019s attention towards the headline \u201810 Principles for Good Design.\u2019<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-762f75a elementor-widget elementor-widget-text-editor\" data-id=\"762f75a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">This technique can be applied for landing pages used to promote products.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d0b86 elementor-widget elementor-widget-image\" data-id=\"57d0b86\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"364\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=660,h=364\/blog\/wp-content\/uploads\/2018\/08\/uberweb.jpg\" class=\"attachment-large size-large wp-image-16016\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=660\/blog\/wp-content\/uploads\/2018\/08\/uberweb.jpg 660w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/uberweb-300x165.jpg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c10e2d elementor-widget elementor-widget-text-editor\" data-id=\"4c10e2d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Uber uses color to direct user\u2019s attention towards the call to action button \u2018Sign Up For Uber\u2019<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11a9744 elementor-widget elementor-widget-text-editor\" data-id=\"11a9744\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Second, try pairing a grayscale filter with an animated effect. For instance, make a black &amp; white image change its color on hover. The animated feedback that appears on mouse hover helps the user communicate with the interface. This subtle detail lets users know that some objects are interactive, increasing user engagement.\u00a0<\/span><a href=\"https:\/\/www.youtube.com\/watch?time_continue=67&amp;v=7ZFpmwYW8C0\" target=\"_blank\" rel=\"noopener\">Here is a quick video\u00a0<\/a><span style=\"font-weight: 400\">that shows how to apply this effect in Elementor.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a3715f elementor-widget elementor-widget-image\" data-id=\"2a3715f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=702,h=399\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-4.png\" class=\"attachment-large size-large wp-image-16017\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=702\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-4.png 702w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-4-300x171.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9197a74 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9197a74\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1704f70\" data-id=\"1704f70\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7b4bc69 elementor-widget elementor-widget-heading\" data-id=\"7b4bc69\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. Blur<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-488d7de elementor-widget elementor-widget-text-editor\" data-id=\"488d7de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">This filter simply applies a Gaussian type blur effect to an image. Blurred imagery directs attention to other parts of the design. In the example below, blur helps focus users on the company\u2019s description.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f5ac1c elementor-widget elementor-widget-image\" data-id=\"9f5ac1c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"359\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=359\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-5-1024x460.png\" class=\"attachment-large size-large wp-image-16018\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-5-1024x460.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-5-300x135.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-5-768x345.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1345\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-5.png 1345w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ce794f elementor-widget elementor-widget-text-editor\" data-id=\"3ce794f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/digitalux.co\/\"><i><span style=\"font-weight: 400\">Digitalux<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> creates a context for their message using a blurred image of people working in an office.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-acbec20 elementor-widget elementor-widget-text-editor\" data-id=\"acbec20\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Images aren\u2019t the only visuals you can blur. One recent trend for designers is to apply a blur to a video instead of to still images. This creates more interesting visual effects such as the one below.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7de89d elementor-widget elementor-widget-image\" data-id=\"d7de89d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"389\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=389\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-6-1024x498.png\" class=\"attachment-large size-large wp-image-16021\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-6-1024x498.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-6-300x146.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-6-768x373.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1342\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-6.png 1342w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-229384b elementor-widget elementor-widget-text-editor\" data-id=\"229384b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/plae.us\/\"><i><span style=\"font-weight: 400\">PLAE<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses blurred video to demonstrate what they do.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ed77551 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ed77551\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7010788\" data-id=\"7010788\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebef14a elementor-widget elementor-widget-heading\" data-id=\"ebef14a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. Opacity<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79ca000 elementor-widget elementor-widget-text-editor\" data-id=\"79ca000\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The opacity filter allows designers to play with the opacity\/transparency of an image. Using opacity, designers can disguise a picture or a video that they don\u2019t want at the forefront of their design. By doing that, designers focus visitor\u2019s attention on other content, such as text or graphics objects.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c5652b elementor-widget elementor-widget-image\" data-id=\"9c5652b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"383\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=383\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-7-1024x490.png\" class=\"attachment-large size-large wp-image-16023\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-7-1024x490.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-7-300x144.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-7-768x368.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1366\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-7.png 1366w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da0f4cf elementor-widget elementor-widget-text-editor\" data-id=\"da0f4cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/theorosel.com\/\"><i><span style=\"font-weight: 400\">Theo Rosel<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> plays with the opacity to bring focus to the words on the screen. The image plays a supportive role \u2014 it creates a context for the project. <\/span><\/i><b><\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8c7292 elementor-widget elementor-widget-text-editor\" data-id=\"f8c7292\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Now, let\u2019s talk about blending!<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e4ab8af elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e4ab8af\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d84ef7\" data-id=\"7d84ef7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-068cc72 elementor-widget elementor-widget-heading\" data-id=\"068cc72\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">4. Sepia<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba9c7d5 elementor-widget elementor-widget-text-editor\" data-id=\"ba9c7d5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Vintage design is a hot trend now. A lot of websites use elements of vintage styles. A vintage look can be artificially created using old-fashioned looking elements \u2014 vintage <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26844\">typography<\/a>, old artifacts (such as photos from previous centuries), and sepia color \u2014 a reddish-brown color.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41e3d6e elementor-widget elementor-widget-image\" data-id=\"41e3d6e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"406\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=406\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.13.50-AM-1024x520.png\" class=\"attachment-large size-large wp-image-16025\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.13.50-AM-1024x520.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.13.50-AM-300x152.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.13.50-AM-768x390.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.13.50-AM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06552cf elementor-widget elementor-widget-text-editor\" data-id=\"06552cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a style=\"background-color: #ffffff\" href=\"http:\/\/portraitsofguilford.com\" target=\"_blank\" rel=\"noopener\">Portraits of Guilford<\/a>\u00a0uses a sepia effect to stir feelings of old times and history.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-702afc5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"702afc5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0d99393\" data-id=\"0d99393\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d8ca1d7 elementor-widget elementor-widget-heading\" data-id=\"d8ca1d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">5. Color Overlays With Minimal Transparency<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d9428d elementor-widget elementor-widget-text-editor\" data-id=\"5d9428d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A dark background with light text is a classic combination. The reason so many designers use a dark overlay is simple \u2014 a dark background amps up the contrast and makes it easier to include text and other elements <\/span><i><span style=\"font-weight: 400\">on top<\/span><\/i><span style=\"font-weight: 400\"> of images. It also makes the image a little less prominent. This can be good for cases when an image lacks a certain spark.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6f61d3 elementor-widget elementor-widget-image\" data-id=\"a6f61d3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"552\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=552\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-8-1024x706.png\" class=\"attachment-large size-large wp-image-16026\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-8-1024x706.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-8-300x207.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-8-768x529.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-8.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e254572 elementor-widget elementor-widget-text-editor\" data-id=\"e254572\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a style=\"background-color: #ffffff\" href=\"http:\/\/itwillglow.co.uk\/\"><i>It Will Glow<\/i><\/a><i> uses a dark background to maintain readability and put intense focus on other visual objects.<\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad9b41d elementor-widget elementor-widget-text-editor\" data-id=\"ad9b41d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: left\"><span style=\"font-weight: 400\">The most common challenge with dark overlays is that the final design might look too heavy. While this may be true if you use black or dark gray backgrounds, it won\u2019t be the case with other colors. Don\u2019t get stuck in the trap that dark means black or gray. Remember that a dark overlay can be any color, such as dark green or dark red. Check out the dark navy blue used by<\/span><a href=\"https:\/\/www.navalshipbuildingcollege.com.au\/\"> <span style=\"font-weight: 400\">Naval Ship Building College<\/span><\/a><span style=\"font-weight: 400\"> in the example below. Dark blue serves two roles \u2014 it both improves readability and helps deliver the message.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d81459 elementor-widget elementor-widget-image\" data-id=\"1d81459\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"390\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=390\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-9-1024x499.png\" class=\"attachment-large size-large wp-image-16028\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-9-1024x499.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-9-300x146.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-9-768x375.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1347\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-9.png 1347w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04724ba elementor-widget elementor-widget-text-editor\" data-id=\"04724ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><em><a href=\"https:\/\/www.navalshipbuildingcollege.com.au\/\"><span style=\"font-weight: 400\">Naval Ship Building College<\/span><\/a><span style=\"font-weight: 400\"> uses dark color to<\/span><span style=\"font-weight: 400\"> mainta<\/span><span style=\"font-weight: 400\">in<\/span><span style=\"font-weight: 400\"> readability.<\/span><\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e73f902 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e73f902\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2cdc353\" data-id=\"2cdc353\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-28825cc elementor-widget elementor-widget-heading\" data-id=\"28825cc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">6. Gradient<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0613fe1 elementor-widget elementor-widget-text-editor\" data-id=\"0613fe1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A gradient is the gradual blending from one color to another. Not that long ago using gradients in web design was a terrible idea. Things change. After years of flat and ultra minimalism, the gradient has made a comeback. Gradients became popular because they help designers introduce depth to designs. Nowadays, we see this effect on many websites. Web designers use gradients to create <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26842\">bold<\/a> statements and channel user emotions.<\/span><\/p><p><span style=\"font-weight: 400\">The great thing about gradients is that this technique is easy to apply \u2014adding a gradient to an image can be as simple as picking two or three colors and then selecting a shape for the gradient. Gradients, in terms of shape, can be directional (left\/right or up\/down) or radial (color variations emanate from a single point in a circular fashion). Gradients enable designers to create novel color combinations that come across as unique, modern, and refreshing.<\/span><\/p><p><span style=\"font-weight: 400\">As a tool, use gradients in a variety of ways. Try applying a gradient to pair brand colors.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55c8b53 elementor-widget elementor-widget-image\" data-id=\"55c8b53\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"393\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=393\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-10-1024x503.png\" class=\"attachment-large size-large wp-image-16031\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-10-1024x503.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-10-300x147.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-10-768x377.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1344\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-10.png 1344w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20a0592 elementor-widget elementor-widget-text-editor\" data-id=\"20a0592\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/www.communitysectorbanking.com.au\/\"><i><span style=\"font-weight: 400\">Community Sector Banking<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses a gradient to emphasize brand colors.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-906fbfa elementor-widget elementor-widget-text-editor\" data-id=\"906fbfa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A gradient can help designers guide the visitor\u2019s eye. When your eye is drawn to one area of color (usually, to the lightest), the change between hues and light &amp; dark areas shifts your focus across the screen toward darker spaces.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fccd5b1 elementor-widget elementor-widget-image\" data-id=\"fccd5b1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=366\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-4.04.38-PM-1024x468.png\" class=\"attachment-large size-large wp-image-16032\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-4.04.38-PM-1024x468.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-4.04.38-PM-300x137.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-4.04.38-PM-768x351.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-4.04.38-PM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdb07e1 elementor-widget elementor-widget-text-editor\" data-id=\"cdb07e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/liv-alongtheway.salomon.com\"><i><span style=\"font-weight: 400\">Salomon<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses lighter and darker areas of the image to move the eye from a starting point (top of the page) to the main content which is available below the fold.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4d70e2 elementor-widget elementor-widget-text-editor\" data-id=\"c4d70e2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">While the preceding examples have shown ways to use gradients for larger images such as <a href=\"https:\/\/elementor.com\/blog\/hero-image\/\">hero images<\/a>, it\u2019s also possible to use gradients for smaller elements (such as thumbnail images).<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f6edc1 elementor-widget elementor-widget-image\" data-id=\"3f6edc1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"497\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=497\/blog\/wp-content\/uploads\/2018\/08\/Bloomberg-web-2016-1024x636.png\" class=\"attachment-large size-large wp-image-16034\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Bloomberg-web-2016-1024x636.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Bloomberg-web-2016-300x186.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Bloomberg-web-2016-768x477.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1193\/blog\/wp-content\/uploads\/2018\/08\/Bloomberg-web-2016.png 1193w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47ee893 elementor-widget elementor-widget-text-editor\" data-id=\"47ee893\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Bloomberg uses gradients for featured images.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8186655 elementor-widget elementor-widget-text-editor\" data-id=\"8186655\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">If you plan to use gradients in your design, you need to remember two simple rules:<\/span><\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don&#8217;t choose colors randomly. Look at a color wheel and select colors that are close to each other (analogous colors). It helps you create a smoother color transition.<\/span><\/li><\/ul><p><span style=\"font-weight: 400\">Don&#8217;t sacrifice readability. Some gradients can be <\/span><i><span style=\"font-weight: 400\">too<\/span><\/i><span style=\"font-weight: 400\"> light and cause readability issues (especially white text). Pay attention to color combinations and contrast. Test readability on different <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"32022\">responsive<\/a> breakpoints.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a8f725b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a8f725b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a85fbd8\" data-id=\"a85fbd8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c315514 elementor-widget elementor-widget-heading\" data-id=\"c315514\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">7. Duotone<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5bf3786 elementor-widget elementor-widget-text-editor\" data-id=\"5bf3786\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">As the name suggests, a duotone is made up of two colors \u2014 it could be two shades of the same color or two contrasting colors. This technique was popular in printing for a long time but has made a resurgence. Spotify popularized duotones, and nowadays dozens of websites use this technique.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78d6edc elementor-widget elementor-widget-image\" data-id=\"78d6edc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"410\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=410\/blog\/wp-content\/uploads\/2018\/08\/screenshot-yearinmusic.spotify.com-2015-12-11-17-46-12-1024x525.jpg\" class=\"attachment-large size-large wp-image-16036\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/screenshot-yearinmusic.spotify.com-2015-12-11-17-46-12-1024x525.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/screenshot-yearinmusic.spotify.com-2015-12-11-17-46-12-300x154.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/screenshot-yearinmusic.spotify.com-2015-12-11-17-46-12-768x394.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1170\/blog\/wp-content\/uploads\/2018\/08\/screenshot-yearinmusic.spotify.com-2015-12-11-17-46-12.jpg 1170w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7c048b elementor-widget elementor-widget-text-editor\" data-id=\"c7c048b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Spotify uses duotone to make regular artist photos attention-grabbing.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34c0a07 elementor-widget elementor-widget-text-editor\" data-id=\"34c0a07\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: left\"><span style=\"font-weight: 400\">Duotone can be used in a variety of ways. Many websites apply a duotone effect like a brightly-colored overlay on top of an image.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edc1acb elementor-widget elementor-widget-image\" data-id=\"edc1acb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-11-1024x576.png\" class=\"attachment-large size-large wp-image-16037\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-11-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-11-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-11-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1366\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-11.png 1366w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c070134 elementor-widget elementor-widget-text-editor\" data-id=\"c070134\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"http:\/\/tset.arte.tv\/tset\/fr\/\"><i><span style=\"font-weight: 400\">Tset Arte<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> features a brightly-colored overlay on top of an image. <\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8c797c elementor-widget elementor-widget-image\" data-id=\"f8c797c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"402\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=402\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.00.24-AM-1024x514.png\" class=\"attachment-large size-large wp-image-16038\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.00.24-AM-1024x514.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.00.24-AM-300x151.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.00.24-AM-768x385.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.00.24-AM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95b5633 elementor-widget elementor-widget-text-editor\" data-id=\"95b5633\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/www.north2.net\"><i><span style=\"font-weight: 400\">North2<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> assigns a different duotone effect for each project. \u00a0\u00a0<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e71e22 elementor-widget elementor-widget-text-editor\" data-id=\"3e71e22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Duotones can also create an emotional connection with visitors. A duotone effect paired with video allows the University of Essex to create a sense of energy, joy, and happiness.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdc575d elementor-widget elementor-widget-image\" data-id=\"cdc575d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"350\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=350\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-12-1024x448.png\" class=\"attachment-large size-large wp-image-16039\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-12-1024x448.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-12-300x131.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-12-768x336.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1347\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-12.png 1347w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a2c343 elementor-widget elementor-widget-text-editor\" data-id=\"4a2c343\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/www.essex.ac.uk\/\"><i><span style=\"font-weight: 400\">University of Essex<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses video to create a sense of what it feels like to study at the university. <\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2d23c0a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2d23c0a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dc82b55\" data-id=\"dc82b55\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9ca7082 elementor-widget elementor-widget-heading\" data-id=\"9ca7082\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">8. Geometric Shapes<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2c7744 elementor-widget elementor-widget-text-editor\" data-id=\"e2c7744\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Geometric shapes are fashionable in web design now. This technique was popularised by Google\u2019s Material Design which uses dozens of different shapes. The technique centers around interesting shapes and layers that combine to create stunning visuals.<\/span><\/p><p><span style=\"font-weight: 400\">The great thing about using geometric layering is that it\u2019s very adaptable \u2014 it works with pretty much any type of content. There are many ways to incorporate geometric shapes into a design project. Designers can use geometric shapes for purely aesthetic purposes, e.g., to create an unusual background pattern, like this one below.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edb2863 elementor-widget elementor-widget-image\" data-id=\"edb2863\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"572\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=572\/blog\/wp-content\/uploads\/2018\/08\/58769ecac6dd5.jpg\" class=\"attachment-large size-large wp-image-16042\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=918\/blog\/wp-content\/uploads\/2018\/08\/58769ecac6dd5.jpg 918w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/58769ecac6dd5-300x214.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/58769ecac6dd5-768x549.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88137f0 elementor-widget elementor-widget-text-editor\" data-id=\"88137f0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">Caava Design uses cool geometry to create a strong visual impression for visitors.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff2a822 elementor-widget elementor-widget-text-editor\" data-id=\"ff2a822\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Alternatively, for strictly functional purposes, like providing directional emphasis. For example, it\u2019s possible to position angles so that they point to the content you want users to see. Notice how the Alan Turing Institute uses geometric shapes to direct the user to the most valuable content \u2014 it\u2019s mission statement and Call to Action button.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4546db elementor-widget elementor-widget-image\" data-id=\"d4546db\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"552\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=552\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-13-1024x706.png\" class=\"attachment-large size-large wp-image-16043\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-13-1024x706.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-13-300x207.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-13-768x529.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-13.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afa9534 elementor-widget elementor-widget-text-editor\" data-id=\"afa9534\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\">The <\/span><\/i><a href=\"https:\/\/www.turing.ac.uk\/\"><i><span style=\"font-weight: 400\">Alan Turing Institute website<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses simple shapes to direct visitors into specific content \u2014 mission statement.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a254f47 elementor-widget elementor-widget-text-editor\" data-id=\"a254f47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Using geometric shapes lets you easily create a focal point for your users. Designers can apply a simple but very effective trick \u2014 <\/span><i><span style=\"font-weight: 400\">any unusual shape draws attention<\/span><\/i><span style=\"font-weight: 400\">. Check how Alchemy.digital uses circle shapes to spotlight an image.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb6ec81 elementor-widget elementor-widget-image\" data-id=\"eb6ec81\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"459\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=459\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.28.38-AM-1024x588.png\" class=\"attachment-large size-large wp-image-16045\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.28.38-AM-1024x588.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.28.38-AM-300x172.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.28.38-AM-768x441.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-16-at-12.28.38-AM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03ad408 elementor-widget elementor-widget-text-editor\" data-id=\"03ad408\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/alchemy.digital\"><i><span style=\"font-weight: 400\">Alchemy.digital<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses a circle for content that should be viewed first. <\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f9dc7ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f9dc7ec\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4a710a6\" data-id=\"4a710a6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-984bfe8 elementor-widget elementor-widget-heading\" data-id=\"984bfe8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">9. Split Screen<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bd02c2 elementor-widget elementor-widget-text-editor\" data-id=\"1bd02c2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">One screen divided in two. Nowadays a lot of websites use design patterns that include two vertical panels placed side by side. This technique is especially practical when you have two equally important things to promote. Each side features a piece of content (a photo, a text block, or an illustration) that is used to deliver the key message. This type of layout is also mobile responsive \u2014 when it comes to smaller screens, the panels can be stacked.<\/span><\/p><p><span style=\"font-weight: 400\">Most split screen designs feature symmetrical 50% \/ 50% designs with two equally essential options. When you give equal importance to both options, you allow the user to choose swiftly whatever option interests them. A split screen puts users in control, enabling them to decide how they want to interact with the content.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d7e539 elementor-widget elementor-widget-image\" data-id=\"7d7e539\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"387\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=387\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-14-1024x495.png\" class=\"attachment-large size-large wp-image-16049\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-14-1024x495.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-14-300x145.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-14-768x371.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1366\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-14.png 1366w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab03a2 elementor-widget elementor-widget-text-editor\" data-id=\"4ab03a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"http:\/\/www.scissorsandclippers.com\/\"><i><span style=\"font-weight: 400\">Scissors and Clippers<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> poses a question to visitors: do they want to book a haircut or get a ticket. Both questions carry equal weight, and one is no more important than the other.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e02f9c1 elementor-widget elementor-widget-text-editor\" data-id=\"e02f9c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">A symmetrical split screen is an excellent design format, but it has one issue \u2014 it might look dull (especially when a lot of websites use this format). Designers who don\u2019t want to get stuck with a yin and yang format experiment with more interesting visual patterns, such as asymmetrical layouts. While asymmetrical layouts look fresh and unexpected, they introduce a few challenges. One of the most significant issues is that it might be challenging to create a connection between slides. Color can be a tool that helps create a visual flow between \u201cscreens.\u201d It can be a brand color or hue with high contrast.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-313cf90 elementor-widget elementor-widget-image\" data-id=\"313cf90\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=398\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-15-at-11.58.32-PM-1024x509.png\" class=\"attachment-large size-large wp-image-16051\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-15-at-11.58.32-PM-1024x509.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-15-at-11.58.32-PM-300x149.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-15-at-11.58.32-PM-768x382.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-15-at-11.58.32-PM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdbc782 elementor-widget elementor-widget-text-editor\" data-id=\"cdbc782\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"http:\/\/rency.cz\/en\/\"><i><span style=\"font-weight: 400\">Rency<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> duplicates a distinct color to establish visual flow from one \u201cscreen\u201d to the other.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a7c8d6 elementor-widget elementor-widget-text-editor\" data-id=\"8a7c8d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Diagonal split screens is another interesting technique to create unusual design. This simple change to the aesthetics (while following the same idea of dual-content design elements) can be really attention-grabbing.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff75d5b elementor-widget elementor-widget-image\" data-id=\"ff75d5b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"459\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=459\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.24.54-PM-1024x588.png\" class=\"attachment-large size-large wp-image-16052\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.24.54-PM-1024x588.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.24.54-PM-300x172.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.24.54-PM-768x441.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-18-at-3.24.54-PM.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1489cc elementor-widget elementor-widget-text-editor\" data-id=\"d1489cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/www.ghafari.com\"><i><span style=\"font-weight: 400\">Ghafari<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses a diagonal split screen to create visual interest.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a55cbbc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a55cbbc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4a79924\" data-id=\"4a79924\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-98f17a2 elementor-widget elementor-widget-heading\" data-id=\"98f17a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">10. Image-Filled Typography<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb35408 elementor-widget elementor-widget-text-editor\" data-id=\"cb35408\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">There is no doubt, an excellent image is eye-candy that can draw users to a design. But sometimes the right words are what designers need to deliver their message. The technique of image-filled typography (or \u2018hollow lettering\u2019) allows designers to achieve this goal. The text acts as a transparent stencil for the image underneath it.<\/span><\/p><p><span style=\"font-weight: 400\">The key to making the most of this design technique is to refine the message \u2014 the core phrase needs to be simple and say something meaningful to the user. Designers should strive to tell users what value a product\/service delivers and why it\u2019s important to them. In the example below, the color adds visual interest, while space draws your eye to the text. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31af8bc elementor-widget elementor-widget-image\" data-id=\"31af8bc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"391\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=391\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-15-1024x501.png\" class=\"attachment-large size-large wp-image-16055\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-15-1024x501.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-15-300x147.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-15-768x375.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1340\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-15.png 1340w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-339f736 elementor-widget elementor-widget-text-editor\" data-id=\"339f736\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"https:\/\/thekaneko.org\/#\"><i><span style=\"font-weight: 400\">KANEKO<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses vibrant colors and makes the most of the space.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07a1bf6 elementor-widget elementor-widget-text-editor\" data-id=\"07a1bf6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">It\u2019s possible to create a more engaging experience by adding interactivity. Pairing a layered effect with interactivity is an excellent way to engage visitors. The motion that happens in the background creates a sense of dynamism while focussing the entire user attention on the message.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c895816 elementor-widget elementor-widget-image\" data-id=\"c895816\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"388\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=388\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-16-1024x496.png\" class=\"attachment-large size-large wp-image-16057\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-16-1024x496.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-16-300x145.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-16-768x372.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1366\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-16.png 1366w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7b3d35 elementor-widget elementor-widget-text-editor\" data-id=\"e7b3d35\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"http:\/\/seven811.com\/\"><i><span style=\"font-weight: 400\">Fusion Winery<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> creates a dynamic experience using a background video of a vineyard in the lettering.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3fccda elementor-widget elementor-widget-text-editor\" data-id=\"b3fccda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: left\"><span style=\"font-weight: 400\">Last but not least, this effect can be used not only for text but also for graphic objects such as logos <\/span><a href=\"http:\/\/www.bellyqchicago.com\/\"><span style=\"font-weight: 400\">Belly Q<\/span><\/a><span style=\"font-weight: 400\"> uses a still photo as the background and cuts out its signature \u201cQ.\u201d <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2767180 elementor-widget elementor-widget-image\" data-id=\"2767180\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"552\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=552\/blog\/wp-content\/uploads\/2018\/08\/bellyq-1024x706.jpg\" class=\"attachment-large size-large wp-image-16058\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/bellyq-1024x706.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/bellyq-300x207.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/bellyq-768x529.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2018\/08\/bellyq.jpg 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eeb7e91 elementor-widget elementor-widget-text-editor\" data-id=\"eeb7e91\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><a href=\"http:\/\/www.bellyqchicago.com\"><i><span style=\"font-weight: 400\">Belly Q<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> creates a focal point for visitors so they\u2019ll know the name and brand of the site they are viewing.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-854936c elementor-widget elementor-widget-text-editor\" data-id=\"854936c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">When it comes to filled lettering, there are a few things to remember when selecting the underneath image. Since visitors don\u2019t see a complete image, the human brain tends to fill in the blanks of the image. Thus, it is essential to make the image inside the letters discernible. It\u2019s better to avoid using human faces or other complex objects. Try to use more abstract objects such as textile patterns.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a241f0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6a241f0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-99f073c\" data-id=\"99f073c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0923625 elementor-widget elementor-widget-heading\" data-id=\"0923625\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Combine Different Effects!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-121930f elementor-widget elementor-widget-text-editor\" data-id=\"121930f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The great thing about the techniques mentioned above is that they can also be combined. When creating a unique look for your site, you can apply different techniques simultaneously. Check out the home page of NYC Pride below. A colored overlay, a split screen, and gradients used together create a truly unique and memorable look. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-406370e elementor-widget elementor-widget-image\" data-id=\"406370e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"388\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=388\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-17-1024x497.png\" class=\"attachment-large size-large wp-image-16061\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-17-1024x497.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-17-300x146.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-17-768x373.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1349\/blog\/wp-content\/uploads\/2018\/08\/pasted-image-0-17.png 1349w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-596c372 elementor-widget elementor-widget-text-editor\" data-id=\"596c372\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center\"><i><span style=\"font-weight: 400\"> \u00a0<\/span><\/i><a href=\"https:\/\/2019-worldpride-stonewall50.nycpride.org\/\"><i><span style=\"font-weight: 400\">NYC Pride 2019<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> uses a few different visual styles to create a truly memorable experience.<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-661e2b8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"661e2b8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-97022f3\" data-id=\"97022f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b6a560d elementor-widget elementor-widget-heading\" data-id=\"b6a560d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9400bd7 elementor-widget elementor-widget-text-editor\" data-id=\"9400bd7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Filter and blend modes enable you to produce a broader spectrum of designs. But when it comes to using blend modes and filters, the golden rule is: try one out, if at first, you don\u2019t succeed, try out another. You need to experiment, explore different approaches to find a design that you and your visitors will enjoy. Elementor helps you design independently \u2014 letting you apply any of these effects without using a graphics editor. Create compelling visual impressions in just seconds!<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.<\/p>\n","protected":false},"author":8813,"featured_media":16196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-16001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beautify Your Images With Filter Effects and Blend Modes<\/title>\n<meta name=\"description\" content=\"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beautify Your Images With Filter Effects and Blend Modes\" \/>\n<meta property=\"og:description\" content=\"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-27T12:57:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T15:24:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\"},\"headline\":\"Beautify Your Images With Filter Effects and Blend Modes\",\"datePublished\":\"2018-08-27T12:57:42+00:00\",\"dateModified\":\"2025-12-30T15:24:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\"},\"wordCount\":2793,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Inspiration\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\",\"url\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\",\"name\":\"Beautify Your Images With Filter Effects and Blend Modes\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png\",\"datePublished\":\"2018-08-27T12:57:42+00:00\",\"dateModified\":\"2025-12-30T15:24:40+00:00\",\"description\":\"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inspiration\",\"item\":\"https:\/\/elementor.com\/blog\/category\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Beautify Your Images With Filter Effects and Blend Modes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.\",\"sameAs\":[\"http:\/\/babich.biz\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/nickb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beautify Your Images With Filter Effects and Blend Modes","description":"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.","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:\/\/elementor.com\/blog\/add-filter-effects-to-images\/","og_locale":"en_US","og_type":"article","og_title":"Beautify Your Images With Filter Effects and Blend Modes","og_description":"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.","og_url":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2018-08-27T12:57:42+00:00","article_modified_time":"2025-12-30T15:24:40+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png","type":"image\/png"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Nick Babich","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/"},"author":{"name":"Nick Babich","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda"},"headline":"Beautify Your Images With Filter Effects and Blend Modes","datePublished":"2018-08-27T12:57:42+00:00","dateModified":"2025-12-30T15:24:40+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/"},"wordCount":2793,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png","keywords":["Build"],"articleSection":["Inspiration"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/","url":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/","name":"Beautify Your Images With Filter Effects and Blend Modes","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png","datePublished":"2018-08-27T12:57:42+00:00","dateModified":"2025-12-30T15:24:40+00:00","description":"To make a strong visual impact on visitors, designers need to select not only the right images but also to spice them up with the right visual effects. This article explores creative ways to apply Filter effects and blend modes.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/08\/Cover-Filters-Post-Image.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inspiration","item":"https:\/\/elementor.com\/blog\/category\/inspiration\/"},{"@type":"ListItem","position":3,"name":"Beautify Your Images With Filter Effects and Blend Modes"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda","name":"Nick Babich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","caption":"Nick Babich"},"description":"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.","sameAs":["http:\/\/babich.biz"],"url":"https:\/\/elementor.com\/blog\/author\/nickb\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/8813"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=16001"}],"version-history":[{"count":7,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16001\/revisions"}],"predecessor-version":[{"id":149203,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/16001\/revisions\/149203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/16196"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=16001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=16001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=16001"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=16001"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=16001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}