CSS Background | Bypeople

deals

premiumpacks & css background (41 items)

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

freebies

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradien...

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradients, one dynamic and the other fixed, both locked to the viewport dimensions and pulled behind the text, similar to the scroll indicator. Created by CodePen user Mike Riethmuller.

Huge gallery of CSS gradient colors perfectly suited for backgrounds that you can copy and paste directly into your project. Simply search the libr...

Huge gallery of CSS gradient colors perfectly suited for backgrounds that you can copy and paste directly into your project. Simply search the library, pick a gradient of your liking, and copy the CSS to add it where necessary on your project. This gallery is made by Eggradients and so the gradients are served in form of egg shapes.

A neat snippet with 4 pure CSS backgrounds featuring slick color schemes and gradients, as well as basic arrow controls to switch between them. Cre...

A neat snippet with 4 pure CSS backgrounds featuring slick color schemes and gradients, as well as basic arrow controls to switch between them. Created by Codepen user joshuar.

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.

SVG Backgrounds hosts a collection of free to use customizable SVG based repeating backgrounds for websites and blogs SVGs are small in file-size, ...

SVG Backgrounds hosts a collection of free to use customizable SVG based repeating backgrounds for websites and blogs SVGs are small in file-size, high-definition, scalable, supported by modern browsers, and customizable. 

An awesome snippet by Codepen user Dima, which allows you to loop a Ken Burns zooming and panning effect on your site's background image, achieving...

An awesome snippet by Codepen user Dima, which allows you to loop a Ken Burns zooming and panning effect on your site's background image, achieving stunning results! This snippet is made purely in CSS.

Full-screen background videos can be a powerful feature to have on a website, and, through the power of CSS, Codepen user Dudley Storey has created...

Full-screen background videos can be a powerful feature to have on a website, and, through the power of CSS, Codepen user Dudley Storey has created a neat snippet, complete with directions and recommended practices in order to implement this visually engaging feature on your website.

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bund...

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bundle could be priced up to $380, get it only $14! Limited-time promo.

A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly g...

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 f...

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 an...

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.

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

A CSS and JavaScript experimental library for sharing a common background across multiple elements. The library comes with various options like add...

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 snippet featuring a cinematic effect for HTML pages using CSS. It takes advantage of the WebKit extension's entity animation and its properties g...

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 beautifully crafted pure-CSS box that features a nice wavy background consisting of two layers of translucid blue tones that wave randomly.

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

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, an...

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, and Presentation Templates (97% Off)

A CSS snippet that generates an animated background. It includes the logos of various brands, services, and products. The snippet can be used freel...

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 i...

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 ...

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).

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

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...

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 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 le...

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 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 webs...

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.

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550...

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550 USD. Find different materials and presentations (Box, Paper, Metal, Plastic and Bottle) and hundreds of possible matches and finishes for your packages.

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 snipp...

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 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 gi...

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 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...

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.

856+ Massive Vector Wireframe Templates Bundle + Extended License, $775 Worth of Assets for Only $24USD (97% Off)

856+ Massive Vector Wireframe Templates Bundle + Extended License, $775 Worth of Assets for Only $24USD (97% Off)

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 com...

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 fix...

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...

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.

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

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 u...

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...

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.

A simple concept for a background image, very similar to Windows' brushed glass Aero effect, styled with pure CSS. Although the effect is extremely...

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.

Lifetime Web Development Course Access, Over 19 hours of indepth courses on HTML, CSS, Javascript, jQuery, Bootstrap, PHP, AJAX, XML, and much more...

Lifetime Web Development Course Access, Over 19 hours of indepth courses on HTML, CSS, Javascript, jQuery, Bootstrap, PHP, AJAX, XML, and much more, Includes certificate of completion! Become a Web Development Ninja for Just $17! (94% off)

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 transpar...

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 delightful technique for creating the effect of photographic bokeh without any images. It is a little heavy, but it surely provides a convincing ...

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 awesome background design with multiple circles filling the screen completely, based on a painting seen in the streets of New York. The pattern ...

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.

1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century ...

1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century Touch. File Formats Ai and EPS, Get This Pack For Just $29! (58% Off)

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...

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.

CodePen's user reza brings us this neat background design featuring a radial gradient coming from the center of the screen. Everything is created b...

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.

Yet another SVG background image project featuring a neat texture made in CSS. This time, we get multiple lines going diagonally across the design ...

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.

1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 ...

1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 for a limited time.

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 ac...

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.

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) ...

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.

Phillip Rogers from CodePen came up with this idea for a texturized background combining HTML, LESS and JavaScript. It features a dark gray base wi...

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.

Massive 528+ Branding Templates Bundle, Only $19! Ai, PSD, & InDesign File Formats, Print Ready, 44 Complete Branding Packs in 1 With 98% Discount!

Massive 528+ Branding Templates Bundle, Only $19! Ai, PSD, & InDesign File Formats, Print Ready, 44 Complete Branding Packs in 1 With 98% Discount!

A nicely styled background image created with HTML, LESS (a variant of CSS) and JavaScript. It features a noisy texture, creating an illusion simil...

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.

A magnificent live background that displays groups of animated squares that fade in and out of the frame, reappearing in random places. Also, parti...

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 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 inter...

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).

4000+ Presentation Slides for Powerpoint & Keynote, Only $19! 120 Ready-Made Templates. 100 Color Schemes. Editable Charts, Infographics, Maps & Mu...

4000+ Presentation Slides for Powerpoint & Keynote, Only $19! 120 Ready-Made Templates. 100 Color Schemes. Editable Charts, Infographics, Maps & Much More!

This little code snippet serves as a demonstration for a Coderwall article that shows how to set canvas elements as body background in your project...

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.

This code snippet provides a grid background created with pure CSS3 that can be quite useful for organizing elements precisely into specific dimens...

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.