deals

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

Lifetime Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Us...

Lifetime Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Use Forever!

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.

2390+ Vector Design Assets, 446 Ready-Made Logo Templates, Only $19: Editable Ai, EPS, CDR Formats, Huge Variety Of Content, Commercial Use. Over $...

2390+ Vector Design Assets, 446 Ready-Made Logo Templates, Only $19: Editable Ai, EPS, CDR Formats, Huge Variety Of Content, Commercial Use. Over $3214 In Valuable Assets

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.

13,200+ Vector Icons, Only $29: Unique Flat & Line Illustrations, Pixel Perfect EPS, Ai, SVG Formats, 50+ Icon Categories , Commercial Use

13,200+ Vector Icons, Only $29: Unique Flat & Line Illustrations, Pixel Perfect EPS, Ai, SVG Formats, 50+ Icon Categories , Commercial Use

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.

Awesome Website Widgets Bundle, Only $19: HTML, CSS, JS & Sketch Files, Animated & Styled, Clean Code, Use Ready

Awesome Website Widgets Bundle, Only $19: HTML, CSS, JS & Sketch Files, Animated & Styled, Clean Code, Use Ready

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

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter ...

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter (8.5 x 11 inches). Only 19$! (93%Off).

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.

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (...

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (98% OFF)

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.

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

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.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% 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.

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% 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.

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)

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.

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Let...

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Letterheards, Brochures, CV/Resume Templates, INDD, PSD, Ai, EPS File Formats. Get this Bundle Now For Just $29!

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.

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!

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

Lifetime Access to ViVAThemes Entire WordPress Themes Collection, Includes Unrestricted Access to All 29 Professional Design Themes for Online Shop...

Lifetime Access to ViVAThemes Entire WordPress Themes Collection, Includes Unrestricted Access to All 29 Professional Design Themes for Online Shops with WooCommerce Integration, Portfolios, Startups, & Business Sites PLUS All Future Releases, Theme Updates, & Support. Only $29! (71% Off!)

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.