43 CSS Headers And Footers

June 7, 2017 | by Vladimir Stepura

Collection of free HTML and CSS headers and footers. Demo and download code (*zip).

Table Of Contents

  1. Article Headers
  2. Article Fullscreen Headers
  3. Fixed (Sticky) Headers
  4. Footers
  5. Video Headers

Article Headers

Demo Image: CSS Animated Header
Demo Image: CSS Animated Header

CSS Animated Header

Animated blog header background image, no JavaScript.
Made by Nodws
May 30, 2017

Demo Image: Slanted Div, Fixed Header
Demo Image: Slanted Div, Fixed Header

Slanted Div, Fixed Header

Skewed divs and parallax effect created by fixed header. Simple layout and instructions for modification in the JS!
Made by Andrew Bales
January 10, 2017

Demo Image: CSS Header
Demo Image: CSS Header

CSS Header

HTML and CSS fixed disappearing scrolling header.
Made by Dudley Storey
December 3, 2016

Demo Image: Multi-layered Parallax Illustration
Demo Image: Multi-Layered Parallax Illustration

Multi-Layered Parallax Illustration

HTML, CSS and JavaScript multi-layered parallax illustration.
Made by Patryk Zabielski
April 27, 2016

Demo Image: Hero Idea
Demo Image: Hero Idea

Hero Idea

Hero idea in HTML, CSS and JavaScript.
Made by Jake Lundberg
April 6, 2016

Demo Image: Headings/Hero Image Typography Playground
Demo Image: Headings/Hero Image Typography Playground

Headings/Hero Image Typography Playground

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.
Made by Mirko Zorić
March 18, 2016

Demo Image: Hero Zoom On Scroll
Demo Image: Hero Zoom On Scroll

Hero Zoom On Scroll

Simple zoom effect using window scroll to adjust some CSS.
Made by Derek Palladino
October 8, 2015

Demo Image: Neat Parallax Hero Effect
Demo Image: Neat Parallax Hero Effect

Neat Parallax Hero Effect

Some JavaScript magic to make this nifty little parallax hero.
Made by Dominic Magnifico
September 22, 2015

Demo Image: Fixed Post Header
Demo Image: Fixed Post Header

Fixed Post Header

Fixed header for each post with HTML, CSS and JavaScript.
Made by White Wolf Wizard
August 5, 2015

Demo Image: CSS Parallax Header Image
Demo Image: CSS Parallax Header Image

CSS Parallax Header Image

HTML and CSS parallax header image.
Made by Bennett Feely
November 18, 2014

Article Fullscreen Headers

Demo Image: Hero Image Showcase
Demo Image: Hero Image Showcase

Hero Image Showcase

Hero image showcase with HTML, CSS and JS.
Made by Art
May 27, 2017

Demo Image: Hero Effect–Magazine
Demo Image: Hero Effect–Magazine

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.
Made by Cameron Campbell
November 15, 2016

Demo Image: Flexbox Hero Header
Demo Image: Flexbox Hero Header

Flexbox Hero Header

Simple parallax hero header with flexbox.
Made by Ana Vicente
April 5, 2016

Demo Image: Simple Parallax Header
Demo Image: Simple Parallax Header

Simple Parallax Header

HTML, CSS and JS simple parallax header with blur.
Made by tsimenis
April 5, 2016

Demo Image: Hero OnScroll
Demo Image: Hero OnScroll

Hero OnScroll

HTML, CSS and JS hero on scroll.
Made by verdzik
November 9, 2015

Demo Image: Fullscreen Header With Background Color Cycle
Demo Image: Fullscreen Header With Background Color Cycle

Fullscreen Header With Background Color Cycle

Fullscreen header with background color cycle in pure CSS.
Made by Kenny Sing
November 17, 2014

Demo Image: Continuous Scrolling Background Of Sticky Header
Demo Image: Continuous Scrolling Background Of Sticky Header

Continuous Scrolling Background Of Sticky Header

Continuous scrolling background of sticky header in HTML, CSS and JavaScript.
Made by Robert Borghesi
September 17, 2014

Fixed (Sticky) Headers

Demo Image: Responsive Scrolling Sticky Header
Demo Image: Responsive Scrolling Sticky Header

Responsive Scrolling Sticky Header

Using element queries to power a layout with a cover image and a nav that sticks to the top of the page on scroll.
Made by Tommy Hodgins
April 9, 2017

Demo Image: Scroll Header
Demo Image: Scroll Header

Scroll Header

Really smooth on mobile/touch enabled devices.
Made by Blake Bowen
February 11, 2017

Demo Image: Responsive Scroll Header
Demo Image: Responsive Scroll Header

Responsive Scroll Header

Responsive scroll header in HTML, CSS and JavaScript.
Made by Dylan Macnab
December 28, 2015

Demo Image: Animate Header In/Out After Scrolling
Demo Image: Animate Header In/Out After Scrolling

Animate Header In/Out After Scrolling

Using jquery-waypoints, well be checking to see when data-animate-header (this section) is above the top of screen, then animate data-animate-header (the fixed header) in/out accordingly. We’re able to do this with css transitions and a combo of 3 classes (.header-past, .header-show, .header-hide) - without having to clone or do any dom manipulating.
Made by antwon
June 16, 2015

Demo Image: Header Fade
Demo Image: Header Fade

Header Fade

HTML, CSS and JavaScript header fade.
Made by Emmanuel Pilande
March 7, 2015

Demo Image: Fixed Header Scroll Effect And Smart Nav For One-Page Sites
Demo Image: Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Rudimentary combination of jQuery fixed header on scroll and nav active section class effect.
Made by Summer
February 2, 2015

Demo Image: Auto Hide Sticky Header
Demo Image: Auto Hide Sticky Header

Auto Hide Sticky Header

Setting classes on the header with JavaScript.
Made by jasper
January 21, 2015

Demo Image: Sticky Header CSS Transition
Demo Image: Sticky Header CSS Transition

Sticky Header CSS Transition

Fun example of a sticky header utilizing some CSS3 transitions!
Made by Brady Sammons
October 23, 2014

Demo Image: Top Sliding Nav
Demo Image: Top Sliding Nav

Top Sliding Nav

Hidden nav that slides in from the top once the page is scrolled.
Made by Chris Gruber
October 20, 2014

Demo Image: Responsive Sticky Header Navigation
Demo Image: Responsive Sticky Header Navigation

Responsive Sticky Header Navigation

Cool navigation with HTML, CSS and JS.
Made by MarcLibunao
June 8, 2014

Demo Image: Fixed Header (Quick Hack)
Demo Image: Fixed Header (Quick Hack)

Fixed Header (Quick Hack)

The header is not fixed with a solid background color and there is a fixed div at the top that is small. Then there is a div that is not fixed within the header with the title. Simply wanted to try and prototype the idea. Works in a decent hack-ish sort of way.
Made by Darcy Voutt
March 21, 2014

Demo Image: Sticky Header Visual Trick
Demo Image: Sticky Header Visual Trick

Sticky Header Visual Trick

Creates a sticky hacky sticker header using CSS without creating a scroll event handler.
Made by Michael
July 19, 2013

Footers

Demo Image: Parallax Footer
Demo Image: Parallax Footer

Parallax Footer

Website fixed footer with HTML, CSS and JavaScript.
Made by Austin Paquette
January 7, 2017

Demo Image: Footer With Content Scale
Demo Image: Footer With Content Scale

Footer With Content Scale

HTML, CSS and JavaScript footer with content scale.
Made by Mātthīas
December 3, 2016

Demo Image: Social Media Footer
Demo Image: Social Media Footer

Social Media Footer

Just a hover effect for the social media links in the footer of a page.
Made by Andrew Canham
September 22, 2016

Demo Image: Simple Fixed Footer
Demo Image: Simple Fixed Footer

Simple Fixed Footer

HTML and CSS simple fixed footer.
Made by Mātthīas
August 25, 2015

Demo Image: Simple Slide-Out Footer
Demo Image: Simple Slide-Out Footer

Simple Slide-Out Footer

HTML and CSS simple slide-out footer.
Made by Riley Shaw
August 24, 2014

Demo Image: HTML And CSS Fixed Footer
Demo Image: HTML And CSS Fixed Footer

HTML And CSS Fixed Footer

A quick example of a fixed footer.
Made by Mads Håkansson
May 4, 2014

Demo Image: Pure CSS Classy Footer
Demo Image: Pure CSS Classy Footer

Pure CSS Classy Footer

Pure CSS transitioned footer. Keeps away from content, shows itself when it needs to be seen.
Made by Nick Braver
January 21, 2014

Demo Image: Beautiful Aurora Footer Lights
Demo Image: Beautiful Aurora Footer Lights

Beautiful Aurora Footer Lights

Beautiful Aurora lights display for footer.
Made by Amit Ashok Kamble
October 28, 2013

Video Headers

Demo Image: React Video Header
Demo Image: React Video Header

React Video Header

Simple React.js video header.
Made by Mark Sarpong
June 2, 2017

Demo Image: Video Header
Demo Image: Video Header

Video Header

Video header with HTML, CSS and JavaScript.
Made by Alex
February 6, 2017

Demo Image: Hero Video
Demo Image: Hero Video

Hero Video

A pen that shows how to create a hero with a background video.
Made by Chris Simeone
October 20, 2016

Demo Image: Fullscreen Background Video With Mix-Blend-Mode Overlay Text
Demo Image: Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Shows full-screen video with effective, legible text overlay using mix-blend-mode.
Made by Dudley Storey
September 8, 2016

Demo Image: Video Header Animation
Demo Image: Video Header Animation

Video Header Animation

Animation was customized used Adobe After Effects and rendered to be compatible across all browsers with .ogv and .webm files. Does not operate in mobile (intentionally). Bootstrap framework for HTML is used, no JavaScript needed.
Made by Sylvia Maguia
October 4, 2015

Demo Image: Responsive Video Header
Demo Image: Responsive Video Header

Responsive Video Header

Responsive video header with gradient in HTML and CSS.
Made by Jacob Davidson
May 29, 2015

FreeFrontend © 2016 - 2017

Back to top