29 CSS headers and footers for your blog or website

Headers and footers are essential elements when creating a new website or blog, or even when simply updating them to meet current web design standards. These are areas that website visitors tend to pay close attention to, so we must carefully craft and refine them to ensure they are visually appealing as well as functional.

That's why we're sharing 29 CSS headers and footers that you can use on your blog or website , giving it that touch of quality you've been looking for. This list includes full-screen article headers, as well as standard-sized headers, fixed headers, footers, and some video headers to add a different perspective to your site.

Curved header

This header is distinguished by its curved bottom, making it a truly unique addition to any website or blog. It's pure CSS, so why not try it out on your staging site to see how it will look on your blog?

Header image Parallax

Featuring a striking parallax image effect, this header is easily identifiable by using the CSS `background-image` attribute . The header image is positioned at the top of the page for a highly effective code effect.

Header fixed angled

This header is securely fixed at the top of the webpage, distinguished by a diagonal line that spans the entire horizontal area of the user's view. It demonstrates how pseudo-CSS elements can be used to create a fixed header with a background image.

Skewed header

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

Header with SVG animation

A very simple header, although it uses SVG animation to distinguish itself from the others on this list. You can access a large list of websites with SVG animations here.

Fixed header with Div

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

Parallax multi-layer illustration

A beautifully crafted header, created with multi-layered HTML, CSS, and JavaScript , perfect for a video game website. Highly polished throughout.

Fixed post header

A fixed header for each post created with HTML, CSS, and JavaScript. When you scroll down, the header is minimized and remains fixed at the top.

Full screen header with animation

A header that offers a sideways scrolling animation and produces a relaxing effect on the viewer.

Hero image full screen

With a zoom effect , this full-screen header reveals itself as highly original. Perfect for a website where visitors will frequently scroll to navigate.

Flexbox with button

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

Flexbox Hero Header

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

Sticky Header on scroll

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

Responsive Scrolling Sticky

Another fixed header with a great effect when the menu reaches the top of the page, so that at that moment it remains fixed and we can continue scrolling through the site.

Scroll Header

It stands out from the rest due to its subtle and elegant animation as you scroll. At the end, the header remains fixed at the top.

Responsive Scroll Header

Another great animation to distinguish this header from the rest using HTML, CSS, and JavaScript.

Header In / out

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

header fade

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

Header that is hidden

A different header that hides as we scroll, with an animation that goes unnoticed but is of great quality.

parallax footer

A high-quality , fixed footer created with HTML, CSS, and JavaScript, featuring a shading effect.

Footer with content scale

A high-quality and very original footer that leaves the visitor speechless with its graceful presentation of this website.

Social media footer

The footer stands out for its buttons that link to the most popular social media platforms. The animation that plays when you hover the mouse pointer over each social media icon is particularly noteworthy.

Animated mobile footer menu

By resizing your web browser window to view this footer, you'll find the 2-3 sections that a user would see on a mobile device. It's displayed at 767px.