Category: background

Decorative WebGL Backgrounds

Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Three.js WebGL library to create the various shapes, and the animati...

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong. The demo act...

WebGL Scroll Spiral

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims to be as light as possible on desktops or mobile devices. (Click the image to view the demo) Attention: You’ll...

Hero Patterns

A project by Steve Schoger: A collection of repeatable SVG background patterns for you to use on your digital projects. Customizeable patterns. You can even snag the path data for your own deeds. Direct Link to Article — Permalink Hero Patterns is a post from CSS-Tricks ...

Background Segment Effect

View demo Download source Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same ba...