CSS Background

(36 submissions) | May 18, 2017 (latest edition)

Bring your website to life by applying CSS backgrounds with multiple effects and animations, using HTML5 and CSS.

  • A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly generated color transition gradients and tesselations in the style of Material Design. This jaw-droppingly beautiful JS/CSS snippet can come in handy for photo galleries or header effects.

  • This is a bundle containing 180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.

  • Hero Patterns is a collection of repeatable SVG background patterns for you to use on your digital projects. The background and foreground color and the opacity can be changed for the patterns.

  • A CSS and JavaScript experimental library for sharing a common background across multiple elements. The library comes with various options like adding a gap between elements, toggle gradient or background image and delete some layers to make sure the background is still in place.

  • A beautifully crafted pure-CSS box that features a nice wavy background consisting of two layers of translucid blue tones that wave randomly.

  • A snippet featuring a cinematic effect for HTML pages using CSS. It takes advantage of the WebKit extension’s entity animation and its properties grain and scratch in order to create this effect.

  • A CSS snippet that generates an animated background. It includes the logos of various brands, services, and products. The snippet can be used freely and modified by anyone, and it was created by Josh Scarbrough.

  • A code snippet made in CSS and JavaScript which creates an animated background in low-poly style. It is perfect for any kind of website, although its modification is a bit painful, especially its colors. The snippet is free and it was created by Samuel Marchal.

  • Coverr is a website that gathers videos with gorgeous look and feel to use as backgrounds. They are lightweight and can be used immediately thanks to the shortcode the site provides. You can download for free the one you like the most. It updates every week (7 new videos).

  • A gradient background done entirely with CSS. The code doesn’t have more than 10 lines, and it manages to create a great gradient that will take less space than an image. It was created by Bruno Braes.

  • A friendly grid-like background in pure CSS, perfect for all sorts of web projects. The code can be modified in no time, and you can use this snippet for personal and commercial works. The code was uploaded to Codepen by user disjunto.

  • A nice background in pure CSS. It uses linear gradients to differentiate among bricks. The code is not heavy at all, easing its inclusion in a website or other digital works. Use it freely; the code was written by Joshua Hibbert.

  • A clean CSS background that divides the screen diagonally. The code is really simple and you can use it on any commercial or personal website to give it a little personality. The snippet was made by Codepen user Jdias.

  • A really cool Codepen snippet that generates a “static” effect, you know, like those we used to see on our TVs when the signal was dead. The effect was created with CSS and JavaScript, and it was made by Zach Green.

  • A nice and colorful background effect made with CSS. The beauty of this snippet is that it creates a gradient that you can see on any text in which this effect is applied, no matter how long it is. The snippet is really small. Sandesh Damkondwar created it and uploaded it to Codepen.

  • A zigzag pattern made in CSS by Codepen user Jim Hall. Its most common use is as a background on any website or even in other types of creative work.

  • A diagonally-striped and simply created background made in CSS, a pen that can be used in any project (commercial and personal). It has a light composition, very few lines of CSS and it can be implemented easily. It was created by Codepen’s user Vincent.

  • A nice skewed background done with CSS. It is a pen inspired by a pen made by Marcel Kasiokiewicz, with the only difference that this one has a fixed navbar with a shadow on scroll. The pen was made by Matthew Craig.

  • A chained background made in CSS. It is based on Lea Verou’s CSS3 Patterns. It just needs a few lines of CSS to be created and it can be integrated anywhere, both personal and commercial projects. The snippet was made by Peter Schmalfeldt.

  • A beautiful pattern made in CSS that can be used as a background. It is a simple creation, yet it delivers a really nice result, showing diagonal up and down arrows. The script takes only a few lines of CSS and it was made by Peter Schmalfeldt.

  • A colorful background made in pure CSS. It is incredibly lightweight, actually, this snippet takes only a few lines of CSS to deliver an acceptable zigzag background. It could be improved, of course, to make it smoother. It was made by Peter Schmalfeldt.

  • This code snippet provides a grid background created with pure CSS3 that can be quite useful for organizing elements precisely into specific dimension or just to give a little bit of dynamism to the showcasing of a project. Created by Jason Delia and uploaded to CodePen.

  • This little code snippet serves as a demonstration for a Coderwall article that shows how to set canvas elements as body background in your projects. This example applies a subtle noise effect in order to provide a little bit of texture. Created by Jack Rugile and uploaded to CodePen.

  • A simple code snippet designed by CodePen’s user Jérémy Barbe. It provides a simple background made in CSS with underlying lines, creating an interesting pattern that can be useful for organization and alignment purposes (you can see these lines by highlighting the design).

  • A magnificent live background that displays groups of animated squares that fade in and out of the frame, reappearing in random places. Also, particles follow the movement of the mouse. Created by CodePen’s user Eryk Napierała, this project takes full advantage of HTML5 Canvas.

  • A nicely styled background image created with HTML, LESS (a variant of CSS) and JavaScript. It features a noisy texture, creating an illusion similar to sandpaper, bringing out the background. This code snippet was designed and published by CodePen’s user Phillip Rogers.

  • Phillip Rogers from CodePen came up with this idea for a texturized background combining HTML, LESS and JavaScript. It features a dark gray base with black holes organized diagonally, creating an attractive effect and giving a bit more profile to an otherwise uninteresting image.

  • A project that provides a background image with SVG, incorporating a very subtle texture over a solid white base. It makes use of HMTL, CSS (LESS) and JavaScript to function, while the SVG is encoded as a base64. It was created by CodePen’s user Phillip Rogers.

  • The final result of this project displays an amazing background image that combines a violet-to-blue diagonal gradient with a set of lines going across it, generating an impressive effect that is guaranteed to stand out. Created and uploaded to CodePen by Philip Rogers.

  • Yet another SVG background image project featuring a neat texture made in CSS. This time, we get multiple lines going diagonally across the design providing a very subtle effect that makes the background less plain, without gathering too much attention. It was created by CodePen’s user Alex.

  • CodePen’s user reza brings us this neat background design featuring a radial gradient coming from the center of the screen. Everything is created by applying only CSS (Sass), so if you want to make any modifications make sure to grab the code and improve it.

  • A code snippet that applies a noise effect all over the background, which brings it out a bit without making it stand out too much in comparison to other elements within the web project. It was completely styled with CSS by CodePen’s user Joshua Stearns, who uploaded the code.

  • An awesome background design with multiple circles filling the screen completely, based on a painting seen in the streets of New York. The pattern creates some sort of “cloud” effect with very light lines, in order to not overload the view. Created by CodePen’s Tim Holman.

  • A delightful technique for creating the effect of photographic bokeh without any images. It is a little heavy, but it surely provides a convincing result that will surely catch some looks from visitors. This code snippet was created and uploaded to CodePen’s by user Jack Rugile.

  • An amazing effect brought to life with some HTML and CSS. It features a moving background image that can only be seen through a completely transparent set of letters, creating a fantastic illusion and bringing all the attention towards the text. This was created by JSFiddle user girlie_mac.

  • A simple concept for a background image, very similar to Windows’ brushed glass Aero effect, styled with pure CSS. Although the effect is extremely subtle, it is very smooth and adds a bit of dimension to a flat background. Uploaded to CodePen by Ade Arwans.

Leave a comment

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator