Envision bold.
Design modern.
Develop effortlessly.

Haze CSS is a powerfull, extensible and lightweight framework designed for modern platforms. It offers ready-to-use frontend components for rapid prototyping, flexible layout creation, and clean, minimalistic styling.

Get Started Downloads
Design to be responsive
Design to be responsive

Designed to be responsive

Modern and discreet
Modern and discreet

Modern and discreet

Flexible and customizable
Flexible and customizable

Flexible and customizable

Simple and intuitive
Simple and intuitive

Simple and intuitive

Reimagining Framework Modularity

Haze CSS breaks free from convention by offering a unique approach to modularity. Structured into three distinct flavors, Haze empowers developers at every stage of the website creation journey. Begin with Haze's base framework, a minimalist, class-less solution that breathes life into your markup with clean, modern styles. Elevate your designs with Haze+ for enhanced layout control and utility, or dive into the world of intricate design elements and UI components with Haze++.

Serban Elyan

Serban Elyan

Creator of HazeCSS

simple icon

Simple. Elegant. Effective.

With its modern aesthetic, Haze effortlessly blends into any project

Please note that an additional confirmation will be delivered via email

< form  action = "reserve.php" >
 < blockquote >
  Please  note  that  an  additional  confirmation  will  be  delivered  via  email
 </ blockquote >
 < label  for = "name" >
Full name:
</ label >
  < input  type = "text" 
id = "name" 
name = "name" 
value = "Brett Boehm" >
 < label  for = "seats" >
Chosen seats:
</ label >
  < input  type = "text" 
id = "seats" 
name = "seats" 
value = "Randomly chosen" 
disabled >
 < label  for = "date" >
Reservation date:
</ label >
  < input  type = "date" 
id = "date" 
name = "date" >
 < label  for = "time" >
Reservation time:
</ label
>
  < input  type = "time" 
id = "time" 
name = "time" >
 < br >
 < input  type = "submit" 
value = "Submit" >
</ form >
dark mode icon

Your preferred mode, effortlessly toggled.

Seamless light and dark theme transitions, adapting to your system preferences

< p >
 The  activities  take  place  between 
< time > 09:00 GMT+1 </ time >
< time > 17:00 GMT+1 </ time >
every  day  of  the  week.  No  activities  are  scheduled  for  the 
< time  datetime = "2024-12-25 00:00" >
Christmas day
</ time >
.
</ p >

< form  action = "booking.php" >
 < p >
Workshop:
</ p >
< br >
 < input  type = "checkbox" 
id = "dev" 
name = "dev" 
value = "Development Workshop" >
 < label  for = "dev" >
Development Workshop
</ label >
< br >

 < input  type = "checkbox" 
id = "design" 
name = "design" 
value = "Design Workshop" >
 < label  for = "design" >
Design Workshop
</ label >
< br >

 < label  for = "attendance_type" >
Attendance:
</ label >
 < select  name = "attendance_type" 
id = "attendance_type" >
  < option  value = "physical" >
Physical
</ option >
   < option  value = "online" >
Online
</ option >
 </ select >

 < label  for = "mentions" >
Additional mentions:
</ label >
 < textarea  id = "mentions" 
name = "mentions" >
</ textarea >

 < br >
 < div  class = "row 
d-flex  flex-wrap  mb-3" >
  < input  type = "button" 
class = "primary" 
value = "Submit" >
  < input  type = "button" 
class = "secondary" 
value = "Cancel" >
  < input  type = "button" 
class = "tertiary" 
value = "Reset" >
 </ div >
</ form >

The activities take place between and every day of the week. No activities are scheduled for the .






The mode change isn't just about altering the background; it harmonizes all content to reflect the desired theme, ensuring a cohesive and immersive user experience. Tap Click the blue button and check out example above.
Check out the docs
customizable icon

Easily editable. Highly customizable.

With variable-driven classes, Haze provides global customization right at your fingertips

Please note that the invoice will be delivered to you via email within 24 hours from completing this payment. Click here to learn more.




:root  {
 --accent : 
#0074cc ;
 --accent-hover : 
#006fc4 ;
 --accent-alt : 
#22547a ;
 --accent-hover : 
#22547a ;

 --background : 
#eee ;
 --background-main : 
#fff ;
 --background-alt : 
#fafafa ;
 --focus : 
#3d97db ;

 --button-primary : 
var ( --accent ) : ;
 --button-hover-primary : 
var ( --accent-hover ) ;
 --button-secondary : 
#eee ;
 --button-hover-secondary : 
#ddd ;
 --button-tertiary : 
transparent ;
 --button-hover-tertiary  : #fafafa ;

 --link : 
#0f93ff ;
 --link-hover : 
#006fc4 ;
 --link-visited: : 
#0f93ff ;

 --shadow : 
0 10px 35px 
rgba  (0, 0, 0, 0.2) ;
 --shadow-sm : 
0 5px 20px 
rgba  (0, 0, 0, 0.2) ;
 --shadow-lg : 
0 15px 50px 
rgba  (0, 0, 0, 0.2) ;

 --animation-duration : 
0.1s ;
 --page-width-sm : 
540px ;
 --page-width-md : 
720px ;
 --page-width-lg : 
960px ;

 --font-sans-serif : 
Segoe UI , 
Roboto , 
Arial ;
 --font-serif : 
Times New Roman , 
Georgia , 
Cambria ;
 --font-sans : 
Segoe UI , 
Helvetica , 
Noto ;
 --font-monospace : 
Menlo , 
Monaco , 
Consolas ;
}

Found what you were looking for?

If the the simplicity, style and customizability have already convinced you, give it a try! Don't forget there's more where this one came from!

See Docs Download
grid icon

Streamline content layout decisions.

Flexible grid choices for seamless content structuring without leaving your markup

< div  class = "row" >
 < div  class = "col-12" >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
1
</ p >
  </ div >
 </ div >
</ div >
< div  class = "row" >
 < div  class = "col-md-6 
col-sm-12" >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
1
</ p >
  </ div >
 < div  class = "col-md-6 
"col-sm-12 >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
2
</ p >
  </ div >
 </ div >
</ div >
< div  class = "row" >
 < div  class = "col-lg-4 
col-md-12 
col-sm-12" >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
1
</ p >
  </ div >
 </ div >
 < div  class = "col-lg-4 
col-md-12 
col-sm-12" >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
2
</ p >
  </ div >
 </ div >
 < div  class = "col-lg-4 
col-md-12 
col-sm-12" >
  < div  class = "container 
bg  p-2  px-3 
mb-4 >
   < p  class = "text-center" >
3
</ p >
  </ div >
 </ div >
</ div >
This demo works better on larger screens. On mobile, you're only gonna see a stack of blocks. Make sure to check this page again once you're on desktop. Untill then, here's a smaller stack of blocks so you don't get bored. Enjoy!

1

2

3

1

1

2

1

2

3

1

2

3

4

1

2

3

4

5

6

responsive icon

Responsive everything.

Effortlessly responsive, no custom code needed for seamless transitions across devices.

Small
Medium
Large
This demo works better on larger screens (yes, once again). On mobile, you're only gonna see.. well, what you should be seing on mobile. Make sure to check this page again once you're on desktop.

Introducing Flow

Explore our newest collection of stunning graphics. From captivating illustrations to mesmerizing designs, our latest selection is sure to inspire. Dive into a world of creativity and elevate your projects with our curated assortment. Discover the perfect visuals to bring your ideas to life. Browse now and unleash your imagination!

placeolder image placeholder image

Introducing Flow

Explore our newest collection of stunning graphics. From captivating illustrations to mesmerizing designs, our latest selection is sure to inspire. Dive into a world of creativity and elevate your projects with our curated assortment. Discover the perfect visuals to bring your ideas to life. Browse now and unleash your imagination!

placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image
placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image
placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image
placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image placeholder image
< div  class = "wrapper 
d-flex  flex-wrap  w-100 >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
</ div >
< div  class = "wrapper 
d-flex  flex-wrap  w-100 >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
</ div >
< div  class = "wrapper 
d-flex  flex-wrap  w-100 >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
</ div >
< div  class = "wrapper 
d-flex  flex-wrap  w-100 >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
 < img  class = "w-100" 
src = "img/placeholder_large.png" >
</ div >
utility icon

There's utility for everything.

An utility kit so advanced and versatile you won't need anything else

< div  class = " container 
shadow-sm  bg-auto  rounded-3 
p-5 " >
 < blockquote  class = " text-serif " >
  There  are  some  elements  of  a  certain  uptime  monitoring  tool  using 
< mark >
HazeCSS
</ mark >
 </ blockquote >
 < div  class = " d-flex " >
  < h1  class = " mt-4 " >
Uptime
</ h1 >
  < p  class = " text-muted 
text-end  text-truncate  w-100  mb-0  ps-3  mt-5 
lh-1 " >
   Over  the  last  60  minutes
</ p >
 </ div >
 < div  class = " container 
rounded-5  bg-auto  shadow-lg  mb-4 
py-3 " >
  < p  class = " text-center 
fs-1  fw-bolder  m-0 
p-3 " >
   100%
</ p >
 </ div >
 < div  class = " container 
rounded-5  position-relative  bg-auto  shadow-lg  content-center  h-25  py-5  px-3 
mb-5 " >
  < div  class = " container 
rounded-5  position-absolute  bg-auto  shadow-lg  top-50  w-50  py-5 
px-3 " >
  < p  class = " text-center 
fs-3  fw-bolder  m-0 
p-3 " >
   100% 
</ p >
  </ div >
  < br  class = " mb-5 " >
< br >
 </ div >
 < div  class = " container 
rounded-5  position-relative  shadow-lg  content-center  h-25 
mb-5 " >
 </ div >
</ div >
There are some elements of a certain uptime monitoring tool using HazeCSS

Uptime

Over the last 60 minutes

100%

100%



Convinced already?

If the layout flexibility, handy utility kit or responsive experience caught your eye, dive deeper into the possibilities. But don't forget there's more to explore!

See Docs Download
debug icon

Easily code. Easily debug.

This is only a placeholder; please do not read. Thank you!

 < img  class = "w-100" 
src = "img/placeholder_large.png" >
component icon

Components for days. Beautiful and minimal.

This is only a placeholder; please do not read. Thank you!

 < img  class = "w-100" 
src = "img/placeholder_large.png" >
animations icon

Easily code. Easily debug.

This is only a placeholder; please do not read. Thank you!

 < img  class = "w-100" 
src = "img/placeholder_large.png" >

Ready to start?

If the thoughtfully designed components and powerful debugging features have caught your attention, amke sure to explore our latest advancements. That's it for now, but make sure to check again!

See Docs Download