Welcome to our updated collection of CSS headers for August 2023. This collection includes 5 new items, hand-picked from various resources such as CodePen, GitHub, and other online platforms. These examples are free to use and can be easily integrated into your web pages to give them a unique and stylish look.
Headers are an essential part of a website's design and functionality. They typically contain the website's logo, navigation menu, and possibly some additional information like social media icons or a search bar. A well-designed header can enhance the user experience, making navigation easier and more intuitive.
Our collection of CSS headers is diverse and versatile. It includes various styles and designs that can cater to different website themes and user preferences. Whether you're looking for a minimalist design or something more elaborate, you're likely to find something that suits your needs in our collection.
In conclusion, our collection of CSS headers is a valuable resource for web developers looking to enhance the aesthetics and usability of their websites. Feel free to explore the collection and use these examples in your projects.
Related Articles
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Non Rectangular Headers
Non-Rectangular header with inline SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS
About the code
Curve Header
Pure CSS curve header.
Links
Made with
- HTML
- CSS
- JavaScript (jQuery.js)
About the code
Header Image Parallax Scrolling Effect with CSS
Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page.
Links
Made with
- HTML
- CSS
About the code
Fixed Angled Header
This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.
Links
Made with
- HTML/Pug
- CSS/Stylus
About the code
Skewed Header
Skewed header with HTML and CSS.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Curve SVG Background Animation
Curve SVG background animation for header.
CSS Animated Header
Animated blog header background image, no JavaScript.
Made by Nodws
May 30, 2017
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
CSS Header
HTML and CSS fixed disappearing scrolling header.
Made by Dudley Storey
December 3, 2016
Multi-Layered Parallax Illustration
HTML, CSS and JavaScript multi-layered parallax illustration.
Made by Patryk Zabielski
April 27, 2016
Hero Idea
Hero idea in HTML, CSS and JavaScript.
Made by Jake Lundberg
April 6, 2016
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
Hero Zoom On Scroll
Simple zoom effect using window scroll to adjust some CSS.
Made by Derek Palladino
October 8, 2015
Neat Parallax Hero Effect
Some JavaScript magic to make this nifty little parallax hero.
Made by Dominic Magnifico
September 22, 2015
Fixed Post Header
Fixed header for each post with HTML, CSS and JavaScript.
Made by White Wolf Wizard
August 5, 2015
CSS Parallax Header Image
HTML and CSS parallax header image.
Made by Bennett Feely
November 18, 2014
Links
Made with
- HTML / CSS
About a code
Cool Header Color Line
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Header Idea
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Minimal Responsive Header & CSS Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Hover Effect for Headers
8 hover effects for header in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Header for Landing Page
Header for landing page using clip-path.
Links
Made with
- HTML
- CSS
About the code
Sexy Animated Rainbow Waves Header
Just a little front-end UI experiment.
Hero Image Showcase
Hero image showcase with HTML, CSS and JS.
Made by Art
May 27, 2017
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
Flexbox Hero Header
Simple parallax hero header with flexbox.
Made by Ana Vicente
April 5, 2016