Making filters for your website
Filters are a handy tool in a web designer’s arsenal. They allow you to alter elements on a page with just a few lines of code. These alterations can be used to quickly create a cohesive design in your websites. We’ll take a brief look at gradients, blend modes, and SVG texturing.
You’re likely familiar already with gradients, but just to give them a proper definition, gradients are a gradual fade between two or more colors. The most common one is a linear gradient.
background: linear-gradient(blue, pink);
background: linear-gradient(cyan -20%, pink 40%, beige 140%)There are also radial gradients and conical gradients. Additionally, you can control the rate of the transition to be more or less gradual, all the way up until it becomes a hard line between two colors.
radial-gradient(cyan 50% , red 50%, orange );These can be combined into some pretty crazy effects:
repeating-linear-gradient(120deg, black, black 10px, white 10px, white 20px);
background-image: radial-gradient(black 15%, transparent 15%),
radial-gradient(black 80%, transparent 40%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;There are lots of free gradient CSS generators online, and any Google search will bring up dozens. These are great for backgrounds because they are computationally inexpensive, infinitely scalable, and easily available.
Next up we have blend modes, which are a way to combine images. There’s a bunch of cool math that goes into making them work, but the gist is that they blend the colors and values from two images in different ways for a variety of results. Here’s an image that we’ll manipulate:
Now here’s that image with a cyan overlay blend mode on top.
background-color: cyan;
mix-blend-mode: overlay;Here’s one with a green difference blend mode.
background-color: green;
mix-blend-mode: difference;And here’s one with a tan color blend mode.
background-color: tan;
mix-blend-mode: color;And finally, here’s one with one of the gradients from before, using a hard-light blend.
background-color: linear-gradient(cyan -20%, pink 40%, beige 140%);
mix-blend-mode: hard-light;As you can imagine, these blend modes can be very useful while creating a cohesive design. You can pop them on top of assets or just throw one over the whole width of the page to capture every asset and easily create a mood for your website.
Finally, we’ll look at creating some textures using SVGs. SVG stands for scalable vector graphic. SVG is an HTML tag and you’ll adjust their settings inside their dom properties. There are lots of SVG properties that you can mess around with, but we’ll just be looking at turbulence. If you want to know more about the other properties, I recommend checking out this guide.
The turbulence filter creates Perlin noise and can be used to create effects such as marbling, white noise, fire, smoke, water, and movement. Lower turbulence gives the effect a larger pattern and higher turbulence makes the pattern smaller until it just looks like white noise.
Here’s an image with the turbulence set to 0.05.
<svg>
<filter id='noise' x='0%' y='0%' width='100%' height='100%'>
<feTurbulence baseFrequency="0.05" />
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#noise)" fill="none">
</svg>And here’s what that image looks like on top of the circuit from before with an overlay blend.
It has an underwater effect that can be combined with more turbulence to be fine-tuned. Alternatively, you could use a turbulence base frequency of 0.4 to get this noise pattern.
<feTurbulence baseFrequency="0.05" />Which can be applied with an overlay blend for this grainy effect.
Turbulence actually has two base frequency inputs, one for the x plane and one for the y plane. If you put in one value they remain uniform, but with two values, we can create frequency maps like this one:
<feTurbulence baseFrequency="0.01, .4" />Then, we can use a displacement map SVG filter to shift the colors according to the frequency map above.
<svg>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.01 0.9" result="NOISE" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
<image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#noise)"></image>
</svg>Here’s that effect on the image with a uniform base frequency of 0.05.
Hopefully this cursory glance into each of these properties gave you some ideas about the possibilities for quickly styling your websites. These filters are simple and super easy to implement but have a huge impact on the visual effect of your website.