Craft Beautiful Websites Effortlessly
NO INSTALLATION REQUIRED
Simply add the CDN link to your project and start building.
USER-FRIENDLY DESIGN
Enjoy intuitive class names inspired by Bootstrap and Tailwind.
OVER 2,625 CSS CLASSES
Access a library of pre-made CSS classes to enhance your designs.
IT IS COMPLETELY FREE
New colors, fonts, classes and features added every week.
This website is developed entirely using OdinCSS code.
Copy and paste the following link into the <head> section of your HTML file:
<link href="https://css.stephanedube.dev/odin.min.css" rel="stylesheet">
How to write the classes?
Add a color, number or shortener to a class name and OdinCSS applies the style instantly.
#color
#color-bg
#color-bg-hover
#color-border
#color-txt
#color-txt-hover
Replace #color with the actual color name, like red, blue, black, etc..
font-size-20
font-space
txt-center
light-blue-bg
display-flex
margin-r-10
border-#number
border-dash-#number
border-rad-#number
font-size-#number
gap-#number
grid-col-#number
h-#number
line-h-#number
margin-#number
max-w-#number
pad-#number
pad-r-#number
transition-#number
w-#number
Replace #number with a real number, like 1, 5, 10, 25, etc..
b replace BOTTOM
bg replace BACKGROUND
col replace COLUMN
h replace HEIGHT
l replace LEFT
pad replace PADDING
pc replace percent (%)
r replace RIGHT
rad replace RADIUS
t replace of TOP
txt replace TEXT
w replace WIDTH
For some exception like wide #number%, you will use w-100-pc or wide-50-pc, etc..
Demo example
Watch OdinCSS classes in action. Every row shows the code, its meaning, and the live result.
<p class="azure-txt">Hello OdinCSS</p>Colors write themselves: #color-txt applies the chosen color to the text.
Hello OdinCSS
<div class="black-gray-bg pad-20 border-rad-12">Card</div>Stack utilities: #color-bg for the background, pad-#number and border-rad-#number for spacing and rounding.
<div class="grad-peachy pad-20 border-rad-12">Gradient</div>Gradient backgrounds are one class away: grad-#name. No CSS gradient syntax required.
<div class="display-grid grid-col-3 gap-10">...</div>Responsive grids: display-grid + grid-col-3 builds an exact 3-column grid with a gap-#number spacing.
<div class="azure-bg yellow-bg-hover"></div>Hover states: #color-bg-hover swaps the background when the mouse passes over. Hover the square!
What Makes OdinCSS Special?
Beginners and Up
OdinCSS makes CSS styling accessible for everyone.
The idea is to make CSS easier for you!
Completely Free
No installation required - just start using it!
Stay focused on your HTML without distractions.
Copy and paste the CSS link to get started.
Add keywords to your HTML classes, and you're all set!
Available Resources
Fonts
It is really easy to change the fonts to your website.
Example : If you write <p class="font-lobster">My text</p> you will get this result ... My text
Colors
Here are some of the most popular website colors and example on how you can apply them:
For border color (blue-border or red-border or anyOdinCSScolor-border), background (green-bg or azure-bg and so on), for hover effect for background color (yellow-bg-hover, charcoal-bg-hover or any of the other colors), for hover effect for text color (white-txt-hover, black-txt-hover, etc...), and for text (green-txt, navy-txt).
Example : If you write <p class="green-txt blue-txt-hover">My text</p> you will get this result ... My text
Azure
Beige
Black
Black Gray
Blue
Bronze
Brown
Brass
Burgundy
Champagne
Charcoal
Chrome
Coral
Copper
Crimson
Cyan
Dark Blue
Dark Gray
Dark Green
Dark Red
Forest
Gold
Gray
Green
Indigo
Ivory
Khaki
Lavender
Light Blue
Light Gray
Light Green
Light Red
Maroon
Magenta
Mint
Navy
Orange
Orchid
Opal
Peach
Pear
Pink
Platinum
Purple
Red
Rust
Salmon
Silver
Slate Gray
Steel
Teal
Titanium
White
Yellow
Gradient
It is really easy to add gradient to a DIV or to a P.
Example : Add a class with the gradient name <div class="grad-peachy">My text</div>