29 CSS headers and footers for your blog or website

CSS footer

The headers and footers are Essential elements when creating a new page web or a blog, or if nothing else we need to update them to meet the current standards of web design. They are spaces to which the visitor to our website usually pays great attention, so we have to take care of them and pamper them enough so that they are pleasing to the eye, apart from being functional.

For that reason we are going to share 29 CSS headers and footers that you can use on your blog or website, and thus give it that point of quality that you were looking for. This list is made up of full screen article headers, as well as the standard size, fixed or fixed headers, footers and some video headers to give another point of perspective to your website.

Curved header

Curved header

A header that is identified by its curved style at the bottom which makes it a very special header for a website or blog. It is pure CSS, so it is already taking time to test in your web staging how it will look if you include it in your blog.

Header image Parallax


With a great Parallax image effect, this header identifies itself by use CSS background-image position. The header image would be positioned at the top of the page for great effect code.

Header fixed angled

Angled Header

This header is well fixed at the top of the web page to differentiate with that diagonal line that crosses the entire horizontal of the user's view. It shows how CSS pseudo-elements can be used to create a fixed header with a background image.

Skewed header


CSS and HTML for this header that in the given example is characterized along that diagonal line that crosses the entire screen from one side to the other.

Header with SVG animation

Curved svg

A very simple header, although it uses an SVG animation to distinguish yourself of which we have in this list. You can access a large list of web pages with SVG animations from here.

Fixed header with Div

div fixed

With Parallax image effect, a fixed header that stands out for the great effect achieved with the fixed background image while the rest scrolls as we scroll with the mouse.

Parallax multi-layer illustration


A header of great finish in Multi-layered HTML, CSS and JavaScript and that can be used perfectly for a website related to the world of video games. Great finish throughout.

Fixed post header


A fixed header for each post made in HTML, CSS and JavaScript. The moment we roll down, the header is minimized and fixed at the top.

Full screen header with animation

Animated waves

A header that provides an animation that moves laterally and that produces a relaxing effect on the viewer.

Hero image full screen

Hero image

With a zoom effectThis header full screen it is revealed as one of great originality. Perfect for a website in which the visitor is going to make great use of scrolling to move around it.

Flexbox with button 

Flexbox with button

A header that takes the entire width of the screen to display a button. Perfect for landing pages with CSS flexbox.

Flexbox Hero Header

flexbox hero

A header with effect parallax and flexbox quite simple that stands out for the elegance of its design mainly.

Sticky Header on scroll

sticky header

As its name suggests, a fixed header when we scroll with the mouse when moving to see the rest of the web page.

Responsive Scrolling Sticky

responsive scroll

Another fixed header of great effect when the menu reaches the top of the page, whyand at that moment it remains fixed and we can keep scrolling the site.

Scroll Header

scroll header

It differs from the rest by proper and delicate animation as we move. At the end of it, the headboard remains fixed at the top.

Responsive Scroll Header

Responsive scroll header

Another great animation for distinguish this header from the rest with HTML, CSS and JavaScript.

Header In / out

animate header

A header that is distinguished by the effect In / out after scrolling and that produces the sensation of rebound.

header fade

header fade

Another animation effect curious and very elegant in HTML, CSS and JavaScript.

Header that is hidden


A different header when hiding according to we use scrolling with an animation that goes unnoticed but of great quality.

parallax footer

parallax footer

A fixed or fixed footer with HTML, CSS and JavaScript. From great quality with shading in effect.

Footer with content scale

Footer scale

A high quality and original footer for astonish the visitor for the graceful way of displaying this web space.

Social media footer

Social media

A footer that stands out for the buttons that lead to social networks best known. The animation that occurs when you leave the mouse pointer over each of the social networks stands out.

Animated mobile footer menu

Animated footer mobile

By reducing the web browser window to view this footer, you will be able to find the 2-3 sections that the user can find on a mobile device. It is displayed at 767px.

Simple Fixed Footer

Single Fixed

Made in HTML and CSS is a simple footer without much fanfare and flourish.

React Video Header

React Video Header

A header with simple video React.js.

Video Header

video header

Other header with simple video and of great quality.

Full Screen Video Header with Mix-Blend


Show a full screen video with text on layer using mix-blend mode.

Video Header animation

Video header animation

The animation was customized with Adobe After Effects to be compatible with all browsers. It does not work on mobile.

Responsive video header with gradient


El gradient is what stands out to this video header from the rest.

Leave a Comment

Your email address will not be published. Required fields are marked with *



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Technoku said

    They all convinced me. Thank you

    1.    Manuel Ramirez said

      You're welcome!