Learn how to create an eye-catching infographic UI using HTML and CSS. Step-by-step guide with simple code examples for beginners and web designers.
Table of Contents
Infographics are a great way to show data and ideas in a clear, colorful, and creative format. Whether you are building a presentation, website section, or dashboard, a custom-designed infographic UI can boost user engagement.
In this blog, we will create a beautiful infographic UI design using only HTML and CSS. You don’t need any advanced tools—just basic web development skills and a text editor. This guide is perfect for beginners and anyone who wants to make their web pages look more professional.
Prerequisites
Before you start, make sure you have:
- Basic understanding of HTML and CSS
- A code editor like VS Code or Sublime Text
- A browser (Chrome, Firefox) to preview your work
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our Infographic. Here's a detailed explanation of the HTML infographic code:
1. <!DOCTYPE html>
This declares the document type and version — HTML5. It helps browsers render the page correctly.
2. <html lang="en">
The <html> element is the root of the HTML document.
lang="en" indicates that the content is in English — good for SEO and accessibility.
3. <head> Section
The <head> contains metadata, styles, and resources for the webpage:
<meta charset="UTF-8">
Sets the character encoding to UTF-8 (supports most characters/languages).<meta name="viewport"...>
Makes the design responsive on all devices.<title>Infographic Design using HTML and CSS</title>
The page title is shown in the browser tab.- Google Fonts:
Loads the "Outfit" font in weights 400, 600, and 700.<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet"> - Phosphor Icons:
Loads icon library for visual icons like gear, chart, etc.<script src="https://unpkg.com/phosphor-icons"></script> - External CSS:
Connects to an external stylesheet named styles.css.<link rel="stylesheet" href="styles.css">
4. <body> Section
This contains the visible content of the webpage.
<div class="infographic">Main wrapper for the infographic layout.
Left Section: .pie-chart
<div class="pie-chart"><div class="pie-inner">CREATIVE<br>INFOGRAPHIC</div>
- Displays central text inside the pie (possibly circular with CSS).
Multiple .label divs:
Each label represents a section of the pie chart with a tooltip:
<div class="label" data-tooltip="Audience you want to target">Target Audience</div>- data-tooltip: Used to show a tooltip on hover via CSS or JS.
- These labels are probably positioned around the pie via CSS.
Labels:
- 🎯 Target Audience
- 📈 Increase Sale
- 💡 Generate New Idea
- 📢 Build Communication
- 📊 Data Management
- 🧭 Strategy
Right Section: .right-panel
<div class="right-panel">This contains a vertical list of steps with icons, each step styled individually.
Each .step has:
- A number:
<div class="step-index">01</div> - An icon:
<i class="ph ph-gear step-icon"></i> - A title and description:
<div class="step-title">Management</div> <div class="step-desc">Organize your workflow efficiently.</div>
Step 2 (CSS Code):
Once the basic HTML structure of the infographic is in place, the next step is to add styling to the infographic using CSS. Here's a detailed explanation of the CSS infographic code:
1. Root and Reset Styles
:root
Defines custom CSS variables (used throughout the design for consistency):
--color-1: #ff9a00; /* Orange */
--color-2: #68c500; /* Green */
--color-3: #1ca7ec; /* Blue */
--color-4: #ec407a; /* Pink */
--color-5: #00bcd4; /* Cyan */*
Resets margin/padding and enables border-box model (essential for layout control):
margin: 0;
padding: 0;
box-sizing: border-box;2. Base Layout Styles
body
Applies global settings:
- Uses Outfit font
- Light grayish background (#e0e5ec)
- Centers the content using Flexbox
- Full height viewport (min-height: 100vh)
display: flex;
justify-content: center;
align-items: center;3. .infographic Container
A responsive wrapper that:
- Holds both a pie chart and step cards
- Uses a flexbox layout
- Fades in with animation
display: flex;
flex-wrap: wrap;
gap: 2rem;
animation: fadeIn 1s ease-in-out;@keyframes fadeIn
Gives the infographic a nice fade-up appearance on load.
4. .pie-chart (The Circular Graph)
Creates a multi-colored circular pie using a conic-gradient:
background: conic-gradient(...);- 360px × 360px circle
- Uses custom color variables for each pie segment
- Adds neumorphic shadows for a 3D effect
.pie-inner
- A smaller circle in the center (160px) for title text
- Positioned absolutely in the middle using:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);5. .label Elements
Used to display tooltips around the pie chart:
- Positioned absolutely around the pie with :nth-child() selectors
- Custom tooltip shown using ::after and data-tooltip:
.label::after {
content: attr(data-tooltip);
opacity: 0;
transition: opacity 0.3s;
}
.label:hover::after {
opacity: 1;
}Each label is rotated and positioned to match its pie slice visually.
6. .right-panel (Step-by-Step Cards)
- A flex column that holds all the .step cards
- Responsive design with min-width: 280px
- Animated appearance using @keyframes revealStep
.step
Each step block:
- Has box shadow (neumorphic style)
- Animated fade-in from bottom (animation-delay is staggered for each step)
- Scales slightly on hover
.step-index
The step number (e.g., 01, 02...):
- Bold white text
- Background uses corresponding pie slice color:
.step:nth-child(1) .step-index {
background: var(--color-1);
}.step-content, .step-icon, .step-title, .step-desc
These handle the layout and styling of:
- Phosphor icon
- Step title and description
Each step looks like a card with an icon on the left and descriptive text on the right.
7. Media Queries
@media (max-width: 768px)
For smaller screens:
.infographic {
flex-direction: column;
}- Stacks pie chart and steps vertically for mobile responsiveness.
:root {
--color-1: #ff9a00;
--color-2: #68c500;
--color-3: #1ca7ec;
--color-4: #ec407a;
--color-5: #00bcd4;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background: #e0e5ec;
padding: 3rem 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.infographic {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
width: 100%;
gap: 2rem;
align-items: center;
justify-content: center;
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pie-chart {
width: 360px;
height: 360px;
background: conic-gradient(
var(--color-1) 0deg 60deg,
var(--color-2) 60deg 120deg,
var(--color-3) 120deg 180deg,
var(--color-4) 180deg 240deg,
var(--color-5) 240deg 300deg,
#a29bfe 300deg 360deg
);
border-radius: 50%;
position: relative;
box-shadow: inset 8px 8px 16px #babecc, inset -8px -8px 16px #ffffff;
}
.pie-inner {
width: 160px;
height: 160px;
background: #e0e5ec;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 1rem;
box-shadow: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;
z-index: 2;
}
.label {
position: absolute;
width: 100px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #333;
line-height: 1.3;
cursor: help;
}
.label::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 8px;
border-radius: 5px;
font-size: 11px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.label:hover::after {
opacity: 1;
}
.label:nth-child(2) {
top: 28px;
left: 42%;
transform: translate(-87%, 224%) rotate(-32deg);
}
.label:nth-child(3) {
top: 59px;
right: 62px;
transform: rotate(34deg);
}
.label:nth-child(4) {
top: 161px;
right: 4px;
transform: rotate(90deg);
}
.label:nth-child(5) {
bottom: 50px;
left: 54%;
transform: rotate(148deg);
}
.label:nth-child(6) {
bottom: 47px;
left: 64px;
transform: rotate(211deg);
}
.label:nth-child(7) {
top: 177px;
left: 0;
transform: rotate(90deg);
}
.right-panel {
flex: 1;
min-width: 280px;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.step {
display: flex;
align-items: center;
border-radius: 16px;
overflow: hidden;
box-shadow: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #e0e5ec;
opacity: 0;
animation: revealStep 0.8s ease forwards;
}
.step:nth-child(1) {
animation-delay: 0.3s;
}
.step:nth-child(2) {
animation-delay: 0.6s;
}
.step:nth-child(3) {
animation-delay: 0.9s;
}
.step:nth-child(4) {
animation-delay: 1.2s;
}
.step:nth-child(5) {
animation-delay: 1.5s;
}
@keyframes revealStep {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.step:hover {
transform: scale(1.03);
box-shadow: 6px 6px 12px #babecc, -6px -6px 12px #ffffff;
}
.step-index {
padding: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.step-content {
padding: 1rem;
display: flex;
gap: 0.8rem;
align-items: center;
}
.step-icon {
font-size: 26px;
color: #555;
}
.step-text {
display: flex;
flex-direction: column;
}
.step-title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.step-desc {
font-size: 0.9rem;
color: #555;
}
.step:nth-child(1) .step-index {
background: var(--color-1);
}
.step:nth-child(2) .step-index {
background: var(--color-2);
}
.step:nth-child(3) .step-index {
background: var(--color-3);
}
.step:nth-child(4) .step-index {
background: var(--color-4);
}
.step:nth-child(5) .step-index {
background: var(--color-5);
}
@media (max-width: 768px) {
.infographic {
flex-direction: column;
}
} Final Output:
Conclusion:
Creating an infographic UI design using HTML and CSS is not only easy but also a great way to improve how information is presented on your website. With the power of CSS gradients, flexbox, tooltips, and animations, you can design clean, attractive, and responsive visual layouts without using any JavaScript or heavy libraries.
Keep practicing by changing colors, shapes, and layouts. Your creativity is the only limit!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
