BACK HOME

CSS - List Generator

Create both unordered and ordered lists and customize the styling. Get an instant live preview of your generated list and effortlessly copy the clean HTML code snippets for your web development projects.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
Thats all folks!



  
width:

height:

font-size:

text-align:

margin:

padding:

border:

border-radius:
copy to clipboard
<style>
li {
  {{liststyletype2}}: url({{listtypeurl}});
  display: {{disp}};
  width: {{zwidth}};
  height: {{zheight}};
  margin: {{marg}};
  padding: {{padd}};
  background: {{zbckclr}};
  color: {{ztxtclr}};
  font-size: {{fntsze}};
  text-align: {{txalign}};
  border: {{bord}};
  border-radius: {{bordrad}};
}
li {
  {{liststyletype}}: {{listtype}};
  display: {{disp}};
  width: {{zwidth}};
  width: {{zheight}};
  margin: {{marg}};
  padding: {{padd}};
  background: {{zbckclr}};
  color: {{ztxtclr}};
  font-size: {{fntsze}};
  text-align: {{txalign}};
  border: {{bord}};
  border-radius: {{bordrad}};
}
</style>

<{{liststyle}}>
  <li><a href="{{zhr1}}">{{list1}}</a></li>
  <li><a href="{{zhr2}}">{{list2}}</a></li>
   <li><a href="{{zhr3}}">{{list3}}</a></li>
   <li><a href="{{zhr4}}">{{list4}}</a></li>
   <li><a href="{{zhr5}}">{{list5}}</a></li>
   <li><a href="{{zhr6}}">{{list6}}</a></li>
   <li><a href="{{zhr7}}">{{list7}}</a></li>
   <li><a href="{{zhr8}}">{{list8}}</a></li>
   <li><a href="{{zhr9}}">{{list9}}</a></li>
   <li><a href="{{zhr10}}">{{list10}}</a></li>
   <li><a href="{{zhr11}}">{{list11}}</a></li>
   <li><a href="{{zhr12}}">{{list12}}</a></li>
   <li><a href="{{zhr13}}">{{list13}}</a></li>
   <li><a href="{{zhr14}}">{{list14}}</a></li>
   <li><a href="{{zhr15}}">{{list15}}</a></li>
   <li><a href="{{zhr16}}">{{list16}}</a></li>
   <li><a href="{{zhr17}}">{{list17}}</a></li>
   <li><a href="{{zhr18}}">{{list18}}</a></li>
   <li><a href="{{zhr19}}">{{list19}}</a></li>
   <li><a href="{{zhr20}}">{{list20}}</a></li>
 </{{liststyle}}>
<{{liststyle}}>
  <li>{{list1}}</li>
  <li>{{list2}}</li>
   <li>{{list3}}</li>
   <li>{{list4}}</li>
   <li>{{list5}}</li>
   <li>{{list6}}</li>
   <li>{{list7}}</li>
   <li>{{list8}}</li>
   <li>{{list9}}</li>
   <li>{{list10}}</li>
   <li>{{list11}}</li>
   <li>{{list12}}</li>
   <li>{{list13}}</li>
   <li>{{list14}}</li>
   <li>{{list15}}</li>
   <li>{{list16}}</li>
   <li>{{list17}}</li>
   <li>{{list18}}</li>
   <li>{{list19}}</li>
   <li>{{list20}}</li>
 </{{liststyle}}>
Riverdrift.com   
2003 - 2026 Hand Made in the U.S.A