W3.CSS Reference
W3.CSS Classes
This reference lists the classes and CSS variables available in W3.CSS 6.
Basic Styling
Colors
Customization
Container Classes
With w3-container
Without w3-container
| Class | Description | |
|---|---|---|
| w3-container | Adds 16px of left and right padding and keeps child margins inside the container. | Try it |
| w3-container used to display a header | Try it | |
| w3-container used to display a footer | Try it | |
| w3-panel | Adds 16px of left and right padding and 16px of top and bottom margin. | Try it |
| w3-panel used to display a note | Try it | |
| w3-panel used to display a quote | Try it | |
| w3-block | Displays an element as a block with width:100%. | Try it |
| w3-code | Formats a block of code with a monospace font, padding, and a left border. | Try it |
| w3-codespan | Formats a short piece of inline code. | Try it |
| w3-content | Centers a page container horizontally with a default maximum width of 980px. It does not center text or inline images. | Try it |
| w3-auto | Centers a page container with a maximum width of 1140px above 1205px, 95% above 992px and up to 1205px, and 100% at 992px or less. | Try it |
| w3-stretch | Applies -16px inline margins to extend an element beyond its parent's content edges. | Try it |
Learn More:
Text Size Classes
Tiny Small Medium Large xLarge
| Class | Description | |
|---|---|---|
| w3-tiny | Specifies a font size of 10 pixels | Try it |
| w3-small | Specifies a font size of 12 pixels | Try it |
| w3-medium | Specifies a font size of 15 pixels | Try it |
| w3-large | Specifies a font size of 18 pixels | Try it |
| w3-xlarge | Specifies a font size of 24 pixels | Try it |
| w3-xxlarge | Specifies a font size of 36 pixels | Try it |
| w3-xxxlarge | Specifies a font size of 48 pixels | Try it |
| w3-jumbo | Specifies a font size of 64 pixels | Try it |
| w3-wide | Adds 4px letter spacing. | Try it |
Learn More:
Font and Text Style Classes
The w3-serif class changes text to serif.
The w3-italic class changes text to italic.
The w3-bold class changes text to bold.
| Class | Description | |
|---|---|---|
| w3-bold | Changes the font to bold | Try it |
| w3-text-bold | Changes the font to bold (same as w3-bold) | Try it |
| w3-italic | Changes the font to italic | Try it |
| w3-text-italic | Changes the font to italic (same as w3-italic) | Try it |
| w3-serif | Changes the font to serif | Try it |
| w3-sans-serif | Changes the font to sans-serif | Try it |
| w3-cursive | Changes the font to cursive | Try it |
| w3-monospace | Changes the font to monospace | Try it |
Learn More:
Text Alignment and Direction Classes
w3-center
My text.
My label
| Class | Description | |
|---|---|---|
| w3-center | Centers text and inline elements inside an element. | Try it |
| w3-text-center | Centers text and inline elements (without !important). | Try it |
| w3-left-align | Aligns text to the left. | Try it |
| w3-right-align | Aligns text to the right. | Try it |
| w3-justify | Adjusts word spacing so full lines align with both edges. | Try it |
| w3-rtl | Adjusts text direction for right to left (rtl) layout | Try it |
| w3-ltr | Adjusts text direction for left to right (ltr) layout | Try it |
Learn More:
Padding Classes
w3-padding
The w3-padding class adds 8px top and bottom and 16px left and right.
| Class | Description | |
|---|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | Try it |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | Try it |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. | Try it |
| w3-padding-16 | Padding 16px top and bottom | Try it |
| w3-padding-24 | Padding 24px top and bottom | Try it |
| w3-padding-32 | Padding 32px top and bottom | Try it |
| w3-padding-48 | Padding 48px top and bottom | Try it |
| w3-padding-64 | Padding 64px top and bottom | Try it |
| w3-padding-top-64 | Padding 64px on top | Try it |
| w3-padding-top-48 | Padding 48px on top | Try it |
| w3-padding-top-32 | Padding 32px on top | Try it |
| w3-padding-top-24 | Padding 24px on top | Try it |
Learn More:
Margin Classes
The w3-margin-left class adds a 16px left margin to an element.
The w3-margin-right class adds a 16px right margin to an element.
| Class | Description | |
|---|---|---|
| w3-margin | Adds a 16px margin to an element | Try it |
| w3-margin-top | Adds a 16px top margin to an element | Try it |
| w3-margin-right | Adds a 16px right margin to an element | Try it |
| w3-margin-bottom | Adds a 16px bottom margin to an element | Try it |
| w3-margin-left | Adds a 16px left margin to an element | Try it |
| w3-section | Adds a 16px top and bottom margin to an element | Try it |
Learn More:
Border Classes
| Class | Description | |
|---|---|---|
| w3-border | Adds a 1px solid border on all four sides. | Try it |
| w3-border-top | Adds a 1px solid top border. | Try it |
| w3-border-right | Adds a 1px solid right border. | Try it |
| w3-border-bottom | Adds a 1px solid bottom border. | Try it |
| w3-border-left | Adds a 1px solid left border. | Try it |
| w3-border-0 | Removes all borders. | Try it |
| w3-bottombar | Adds a 6px solid bottom border. | Try it |
| w3-leftbar | Adds a 6px solid left border. | Try it |
| w3-rightbar | Adds a 6px solid right border. | Try it |
| w3-topbar | Adds a 6px solid top border. | Try it |
Learn More:
Card Classes
w3-card-2
w3-card-4
| Class | Description | |
|---|---|---|
| w3-card | Adds a light box shadow without adding a background color. | Try it |
| w3-card-2 | Same as w3-card. | Try it |
| w3-card-4 | Adds a stronger box shadow without adding a background color. | Try it |
Learn More:
Flex Classes
Item 1
Item 2
Item 3
| Class | Description | |
|---|---|---|
| w3-flex | A flex container for flexible one-dimensional layouts. | Try it |
| w3-flex-column | A flex container with items arranged in a column. | Try it |
| w3-flex-mobile | Arranges flex items in a column on screens 600px wide or smaller when used with w3-flex or any other flex container class. | Try it |
| w3-flex-wrap | A flex container that allows items to wrap to a new line. | Try it |
Flex Item Classes
Compare how the same content shares the available width with w3-flex-1 and w3-flex-auto.
w3-flex-1
One
Two items
Three small items
w3-flex-auto
One
Two items
Three small items
| Class | Description | |
|---|---|---|
| w3-flex-1 | A flex item that grows and shrinks from a zero basis. | Try it |
| w3-flex-auto | A flex item that grows and shrinks from an automatic basis. | Try it |
| w3-flex-none | A flex item that neither grows nor shrinks. | Try it |
| w3-flex-shrink-0 | A flex item that prevents shrinking. | Try it |
| w3-flex-spacer | An automatic margin at the inline start. In a row flex layout, it pushes this item and following items toward the inline end. | Try it |
Learn More:
Main Axis Flex Alignment
One
Two
Three
The main flex axis is horizontal by default, and the cross axis is vertical.
With w3-flex-column, the main axis is vertical and the cross axis is horizontal.
These helpers align flex items along the main axis:
| Class | Description | |
|---|---|---|
| w3-flex-start | Creates a flex container and positions items at the start of the main axis. | Try it |
| w3-flex-center | Creates a flex container and centers items along the main axis. | Try it |
| w3-flex-end | Creates a flex container and positions items at the end of the main axis. | Try it |
| w3-flex-around | Creates a flex container with equal space around items; end spaces are half the spaces between items. | Try it |
| w3-flex-between | Creates a flex container with equal space between items. | Try it |
| w3-flex-evenly | Creates a flex container with equal space between items and at both ends. | Try it |
Cross Axis Flex Alignment
These helpers align flex items along the cross axis:
One
Two
Three
| Class | Description | |
|---|---|---|
| w3-flex-align-start | Creates a flex container and aligns items at the start of the cross axis. | Try it |
| w3-flex-align-center | Creates a flex container and centers items along the cross axis. | Try it |
| w3-flex-align-end | Creates a flex container and aligns items at the end of the cross axis. | Try it |
| w3-flex-align-stretch | A flex container that stretches automatically sized items to fill the cross axis of their flex line. | Try it |
Basic Grid Classes
1
2
3
4
| Class | Description | |
|---|---|---|
| w3-grid | A grid container for flexible two-dimensional layouts. | Try it |
| w3-grid-padding | A grid container with a 16px gap between rows and columns. | Try it |
| w3-grid-2 | 2 equal-width columns for all screen sizes. | Try it |
| w3-grid-3 | 3 equal-width columns for all screen sizes. | Try it |
| w3-grid-4 | 4 equal-width columns for all screen sizes. | Try it |
Learn More:
Responsive Grid Classes
If the container is narrower than the listed minimum column width, the grid uses one column that fits the container.
| Class | Description | |
|---|---|---|
| w3-grid-auto-xsmall | An auto-fitting grid with a 150px minimum column width. | Try it |
| w3-grid-auto-small | An auto-fitting grid with a 200px minimum column width. | Try it |
| w3-grid-auto | An auto-fitting grid with a 250px minimum column width. | Try it |
| w3-grid-auto-large | An auto-fitting grid with a 300px minimum column width. | Try it |
| w3-grid-auto-xlarge | An auto-fitting grid with a 350px minimum column width. | Try it |
| w3-grid-mobile | Changes a grid to one column on screens 600px wide or smaller when used with any grid container class. | Try it |
Grid Item Classes
Span 3
4
| Class | Description | |
|---|---|---|
| w3-grid-span-2 | A grid item that spans 2 columns. | Try it |
| w3-grid-span-3 | A grid item that spans 3 columns. | Try it |
| w3-grid-span-all | A grid item that spans all columns. | Try it |
Grid and Flexbox Gap Classes
1
2
3
Gap helpers set spacing between rows and columns in Grid and between items and lines in Flexbox. They do not create a layout container.
| Class | Description | |
|---|---|---|
| w3-gap | A 16px gap between flex or grid items. | Try it |
| w3-gap-small | An 8px gap between flex or grid items. | Try it |
| w3-gap-large | A 24px gap between flex or grid items. | Try it |
Responsive Row Classes
Column classes control the widths inside a row.
These columns each use one third of the row above 600px and stack at full width on smaller screens.
Column 1
Column 2
Column 3
| Class | Description | |
|---|---|---|
| w3-row | Groups floated columns and keeps following content below them. | Try it |
| w3-row-padding | Groups columns and adds 8px of left and right padding to the row and each column. | Try it |
| w3-half | Uses half of the row above 600px; full width at 600px or less. | Try it |
| w3-third | Uses one third of the row above 600px; full width at 600px or less. | Try it |
| w3-twothird | Uses two thirds of the row above 600px; full width at 600px or less. | Try it |
| w3-quarter | Uses one quarter of the row above 600px; full width at 600px or less. | Try it |
| w3-threequarter | Uses three quarters of the row above 600px; full width at 600px or less. | Try it |
| w3-rest | Fills the remaining space beside floated columns. | Try it |
| w3-col | A floated column used with s, m, and l size classes. | Try it |
| l1 - l12 | Responsive sizes for large screens | Try it |
| m1 - m12 | Responsive sizes for medium screens | Try it |
| s1 - s12 | Responsive sizes for small screens | Try it |
| w3-image | Limits an image to its container width and preserves its proportions. | Try it |
| w3-block | Displays an element as a block with width:100%. | Try it |
| w3-mobile | Displays any element as a full-width block on screens 600px wide or smaller | Try it |
| w3-clear | Makes a parent element contain its floated children. | Try it |
Learn More:
Cell Classes
First cell.
This cell contains more text.
Its content makes the row taller.
Second cell.
| Class | Description | |
|---|---|---|
| w3-cell-row | Container for layout columns (cells). | Try it |
| w3-cell | Layout column (cell). | Try it |
| w3-cell-top | Aligns content at the top of a column (cell). | Try it |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). | Try it |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). | Try it |
Learn More:
Positioning Classes
w3-left
w3-right
| Class | Description | |
|---|---|---|
| w3-top | Fixes an element at the top of the viewport with width:100%. | Try it |
| w3-bottom | Fixes an element at the bottom of the viewport with width:100%. | Try it |
| w3-left | Floats an element to the left | Try it |
| w3-right | Floats an element to the right | Try it |
Learn More:
Visibility Classes
This message is now visible.
| Class | Description | |
|---|---|---|
| w3-hide | Hides an element with display:none; it takes up no layout space. | Try it |
| w3-show | Displays an element as a block (display:block). | Try it |
| w3-show-block | Same as w3-show (display:block). | Try it |
| w3-show-inline-block | Displays an element as an inline block (display:inline-block). | Try it |
| w3-hide-small | Hides an element on screens 600px wide or smaller. | Try it |
| w3-hide-medium | Hides an element on screens from 601px to 992px wide. | Try it |
| w3-hide-large | Hides an element on screens 993px wide or larger. | Try it |
Learn More:
Table Classes
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Class | Description | |
|---|---|---|
| w3-table | Creates a full-width table with padded cells. | Try it |
| w3-striped | Adds alternating backgrounds to table rows. | Try it |
| w3-border | Adds a 1px solid border on all four sides. | Try it |
| w3-bordered | Adds a border below each table row. | Try it |
| w3-centered | Centers text in table header and data cells. | Try it |
| w3-table-all | Full-width table with borders and alternating row backgrounds. | Try it |
| w3-hoverable | Highlights a table row or list item when hovered. | Try it |
| w3-responsive | Adds horizontal scrolling when content, such as a table, is wider than its container. | Try it |
Learn More:
Button Classes
| Class | Description | |
|---|---|---|
| w3-button | Styles a button with variable-based background and text colors on hover. | Try it |
| w3-btn | Styles a button with a shadow on hover. | Try it |
| w3-circle | Applies a 50% border radius; square elements become circles and rectangular elements become ovals. | Try it |
| w3-ripple | Reduces an element's opacity to 0.5 while it is pressed. | Try it |
| Circular button with reduced opacity when pressed | Try it | |
| w3-bar | Groups items in a horizontal bar. | Try it |
| w3-block | Displays an element as a block with width:100%. | Try it |
| Full-width w3-btn | Try it | |
| Full-width rounded button (oval) | Try it |
Learn More:
Navigation Classes
| Class | Description | |
|---|---|---|
| w3-bar | Groups items in a horizontal bar. | Try it |
| w3-bar-block | Vertical bar | Try it |
| w3-bar-item | Provides common style for bar items | Try it |
| w3-sidebar | Side bar | Try it |
| A side bar can contain all types of content | Try it | |
| A side bar overlaying main content | Try it | |
| A side bar overlaying all main content | Try it | |
| A side bar shifting main content to the right | Try it | |
| A side bar with an overlay background | Try it | |
| A Side bar on the right side | Try it | |
| w3-collapse | Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class | Try it |
| w3-main | Container for page content when using the w3-collapse class for responsive side navigations | Try it |
| Fully automatic right-sided responsive side navigation | Try it |
Learn More:
List and Tag Classes
- Jill 4 messages
- Eve
- Adam New
| Class | Description | |
|---|---|---|
| w3-badge | Creates a rounded badge for short labels or counters. | Try it |
| w3-tag | Rectangular tag | Try it |
| w3-ul | Styles a list without bullets, with separator lines and padded items | Try it |
Learn More:
Form Control Classes
| Class | Description | |
|---|---|---|
| w3-input | Styles a full-width input with padding and a bottom border. | Try it |
| Input form as a card | Try it | |
| Input elements (top labels) | Try it | |
| Input elements (bottom labels) | Try it | |
| w3-check | Styles a checkbox input. | Try it |
| w3-radio | Styles a radio input. | Try it |
| w3-select | Styles a full-width select element. | Try it |
| w3-disabled | Adds a disabled appearance and a not-allowed cursor; use HTML disabled to disable a form control. | Try it |
| w3-animate-input | Expands an input to width:100% when focused, with a width transition. | Try it |
Learn More:
Dropdown Classes
| Class | Description | |
|---|---|---|
| w3-dropdown-click | A dropdown container whose panel is shown and hidden with JavaScript. | Try it |
| w3-dropdown-hover | Reveals dropdown content on hover or when keyboard focus is inside the container. | Try it |
| Hoverable dropdown element (used in w3-bar) | Try it | |
| Hoverable dropdown element (used in w3-bar-block) | Try it | |
| Hoverable dropdown element (used in w3-sidebar) | Try it | |
| w3-dropdown-content | A hidden, absolutely positioned dropdown panel; revealed by a hover container or JavaScript. | Try it |
Learn More:
Modal Classes
| Class | Description | |
|---|---|---|
| w3-modal | A hidden, fixed overlay container used for a modal dialog. | Try it |
| w3-modal-content | The content panel inside a modal overlay. | Try it |
Learn More:
Tooltip Classes
Hover over the button or focus it with Tab to reveal the help text.
Extra information| Class | Description | |
|---|---|---|
| w3-tooltip | Container for tooltip text shown on hover or keyboard focus. | Try it |
| w3-text | Tooltip text shown when its tooltip is hovered or contains keyboard focus. | Try it |
Learn More:
Background Color Classes
Red
Pink
Purple
Deep Purple
Indigo
Cobalt
Blue
Light Blue
Cyan
Aqua
Teal
Emerald
Green
Light Green
Lime
Khaki
Yellow
Amber
Orange
Deep Orange
Blue Gray
Blue Grey
Olive
Taupe
Sienna
Brown
Crimson
Sand
White
Paper
Light Gray
Light Grey
Gray
Grey
Dark Gray
Dark Grey
Asphalt
Black
Pale Red
Pale Yellow
Pale Green
Pale Blue
Gray and Grey
Where both spellings are listed, they produce the same color.
For example, w3-gray and w3-grey are identical.
Learn More:
Semantic Colors
Transparent
Note
The semantic color classes w3-danger, w3-warning, w3-success, w3-info, and w3-note use customizable CSS variables.
Text Color Classes
| Class | Description | |
|---|---|---|
| w3-text-red | Text color red | Try it |
| w3-text-green | Text color green | Try it |
| w3-text-blue | Text color blue | Try it |
| w3-text-yellow | Text color yellow | Try it |
| w3-text-light-grey | Text color light-grey | Try it |
| w3-text-grey | Text color grey | Try it |
| w3-text-dark-grey | Text color dark grey | Try it |
| w3-text-black | Text color black | Try it |
| w3-text-white | Text color white | Try it |
| w3-text-pink | Text color pink | Try it |
| w3-text-purple | Text color purple | Try it |
| w3-text-teal | Text color teal | Try it |
| w3-text-light-green | Text color light green | Try it |
| w3-text-lime | Text color lime | Try it |
| w3-text-deep-purple | Text color deep purple | Try it |
| w3-text-indigo | Text color indigo | Try it |
| w3-text-light-blue | Text color light blue | Try it |
| w3-text-blue-grey | Text color blue grey | Try it |
| w3-text-cyan | Text color cyan | Try it |
| w3-text-aqua | Text color aqua | Try it |
| w3-text-amber | Text color amber | Try it |
| w3-text-orange | Text color orange | Try it |
| w3-text-deep-orange | Text color deep orange | Try it |
| w3-text-sand | Text color sand | Try it |
| w3-text-khaki | Text color khaki | Try it |
| w3-text-brown | Text color brown | Try it |
| w3-text-blue-gray | Same as w3-text-blue-grey | |
| w3-text-dark-gray | Same as w3-text-dark-grey | |
| w3-text-gray | Same as w3-text-grey | |
| w3-text-light-gray | Same as w3-text-light-grey |
Learn More:
Border Color Classes
Border color classes change the color of an existing border.
Use them with w3-border or a border bar class.
| Class | Description | |
|---|---|---|
| w3-border-color | Changes an existing border to the specified color. | Try it |
Hover Color Classes
These classes change both background and text colors when an element is hovered:
Hover
| Class | Description | |
|---|---|---|
| w3-hover-amber | Applies amber background and its text color on hover | Try it |
| w3-hover-aqua | Applies aqua background and its text color on hover | Try it |
| w3-hover-asphalt | Applies asphalt background and its text color on hover | Try it |
| w3-hover-black | Applies black background and its text color on hover | Try it |
| w3-hover-blue | Applies blue background and its text color on hover | Try it |
| w3-hover-blue-gray | Applies blue-gray background and its text color on hover | Try it |
| w3-hover-blue-grey | Applies blue-grey background and its text color on hover | Try it |
| w3-hover-brown | Applies brown background and its text color on hover | Try it |
| w3-hover-cobalt | Applies cobalt background and its text color on hover | Try it |
| w3-hover-crimson | Applies crimson background and its text color on hover | Try it |
| w3-hover-cyan | Applies cyan background and its text color on hover | Try it |
| w3-hover-dark-gray | Applies dark-gray background and its text color on hover | Try it |
| w3-hover-dark-grey | Applies dark-grey background and its text color on hover | Try it |
| w3-hover-deep-orange | Applies deep-orange background and its text color on hover | Try it |
| w3-hover-deep-purple | Applies deep-purple background and its text color on hover | Try it |
| w3-hover-emerald | Applies emerald background and its text color on hover | Try it |
| w3-hover-gray | Applies gray background and its text color on hover | Try it |
| w3-hover-green | Applies green background and its text color on hover | Try it |
| w3-hover-grey | Applies grey background and its text color on hover | Try it |
| w3-hover-indigo | Applies indigo background and its text color on hover | Try it |
| w3-hover-khaki | Applies khaki background and its text color on hover | Try it |
| w3-hover-light-blue | Applies light-blue background and its text color on hover | Try it |
| w3-hover-light-gray | Applies light-gray background and its text color on hover | Try it |
| w3-hover-light-green | Applies light-green background and its text color on hover | Try it |
| w3-hover-light-grey | Applies light-grey background and its text color on hover | Try it |
| w3-hover-lime | Applies lime background and its text color on hover | Try it |
| w3-hover-olive | Applies olive background and its text color on hover | Try it |
| w3-hover-orange | Applies orange background and its text color on hover | Try it |
| w3-hover-pale-blue | Applies pale-blue background and its text color on hover | Try it |
| w3-hover-pale-green | Applies pale green background and its text color on hover | Try it |
| w3-hover-pale-red | Applies pale-red background and its text color on hover | Try it |
| w3-hover-pale-yellow | Applies pale-yellow background and its text color on hover | Try it |
| w3-hover-paper | Applies paper background and its text color on hover | Try it |
| w3-hover-pink | Applies pink background and its text color on hover | Try it |
| w3-hover-purple | Applies purple background and its text color on hover | Try it |
| w3-hover-red | Applies red background and its text color on hover | Try it |
| w3-hover-sand | Applies sand background and its text color on hover | Try it |
| w3-hover-sienna | Applies sienna background and its text color on hover | Try it |
| w3-hover-taupe | Applies taupe background and its text color on hover | Try it |
| w3-hover-teal | Applies teal background and its text color on hover | Try it |
| w3-hover-white | Applies white background and its text color on hover | Try it |
| w3-hover-yellow | Applies yellow background and its text color on hover | Try it |
Hover Text Color Classes
Use these classes to change text color when an element is hovered:
Hover
| Class | Description | |
|---|---|---|
| w3-hover-text-red | Hover text color red | Try it |
| w3-hover-text-green | Hover text color green | Try it |
| w3-hover-text-blue | Hover text color blue | Try it |
| w3-hover-text-yellow | Hover text color yellow | Try it |
| w3-hover-text-amber | Hover text color amber | Try it |
| w3-hover-text-aqua | Hover text color aqua | Try it |
| w3-hover-text-black | Hover text color black | Try it |
| w3-hover-text-blue-gray | Hover text color blue gray | Try it |
| w3-hover-text-blue-grey | Hover text color blue grey | Try it |
| w3-hover-text-brown | Hover text color brown | Try it |
| w3-hover-text-cyan | Hover text color cyan | Try it |
| w3-hover-text-dark-gray | Hover text color dark gray | Try it |
| w3-hover-text-dark-grey | Hover text color dark grey | Try it |
| w3-hover-text-deep-orange | Hover text color deep orange | Try it |
| w3-hover-text-deep-purple | Hover text color deep purple | Try it |
| w3-hover-text-gray | Hover text color gray | Try it |
| w3-hover-text-grey | Hover text color grey | Try it |
| w3-hover-text-indigo | Hover text color indigo | Try it |
| w3-hover-text-khaki | Hover text color khaki | Try it |
| w3-hover-text-light-blue | Hover text color light blue | Try it |
| w3-hover-text-light-gray | Hover text color light gray | Try it |
| w3-hover-text-light-green | Hover text color light green | Try it |
| w3-hover-text-light-grey | Hover text color light grey | Try it |
| w3-hover-text-lime | Hover text color lime | Try it |
| w3-hover-text-orange | Hover text color orange | Try it |
| w3-hover-text-pink | Hover text color pink | Try it |
| w3-hover-text-purple | Hover text color purple | Try it |
| w3-hover-text-sand | Hover text color sand | Try it |
| w3-hover-text-teal | Hover text color teal | Try it |
| w3-hover-text-white | Hover text color white | Try it |
Hover Border Color Classes
Hover border color classes change an existing border's color when the element is hovered.
| Class | Description | |
|---|---|---|
| w3-hover-border-color | Changes an existing border to the specified color on hover. | Try it |
Circle and Rounded Corner Classes
| Class | Description | |
|---|---|---|
| w3-circle | Applies a 50% border radius; square elements become circles and rectangular elements become ovals. | Try it |
| w3-round | Element rounded (border-radius) 4px | Try it |
| w3-round-small | Element rounded (border-radius) 2px | Try it |
| w3-round-medium | Element rounded (border-radius) 4px | Try it |
| w3-round-large | Element rounded (border-radius) 8px | Try it |
| w3-round-xlarge | Element rounded (border-radius) 16px | Try it |
| w3-round-xxlarge | Element rounded (border-radius) 32px | Try it |
Learn More:
Display Classes
Top Left
Top Right
Bottom Left
Bottom Right
Top Middle
Left
Right
Middle
Custom Position
| Class | Description | |
|---|---|---|
| w3-display-container | Establishes the positioning container for w3-display-* classes. | Try it |
| w3-display-topleft | Displays content at the top left corner of its container | Try it |
| w3-display-topright | Displays content at the top right corner of its container | Try it |
| w3-display-bottomleft | Displays content at the bottom left corner of its container | Try it |
| w3-display-bottomright | Displays content at the bottom right corner of its container | Try it |
| w3-display-left | Displays content to the left (middle left) of its container | Try it |
| w3-display-right | Displays content to the right (middle right) of its container | Try it |
| w3-display-middle | Displays content in the middle (center) of its container | Try it |
| w3-display-topmiddle | Displays content at the top middle of its container | Try it |
| w3-display-bottommiddle | Displays content at the bottom middle of its container | Try it |
| w3-display-position | Displays content at a specified position in its container | Try it |
| w3-display-hover | Shows content when its container is hovered or contains keyboard focus | Try it |
Learn More:
Effect Classes
| Class | Description | |
|---|---|---|
| w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) | Try it |
| Add opacity/transparency to text | Try it | |
| w3-opacity-off | Turns off opacity/transparency (opacity: 1) | Try it |
| w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) | Try it |
| w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) | Try it |
| w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) | Try it |
| w3-greyscale | Same as w3-grayscale | Try it |
| w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) | Try it |
| w3-greyscale-max | Same as w3-grayscale-max | Try it |
| w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) | Try it |
| w3-greyscale-min | Same as w3-grayscale-min | Try it |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) | Try it |
| w3-sepia | Adds a sepia effect to an element (sepia: 75%) | Try it |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) | Try it |
| w3-overlay | Creates a hidden, fixed, full-viewport overlay with a translucent black background. | Try it |
Learn More:
Hover Effect Classes
Hover over me
| Class | Description | |
|---|---|---|
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | Try it |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | Try it |
| w3-hover-shadow | Adds shadow to an element on hover | Try it |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | Try it |
| w3-hover-greyscale | Adds a black and white (100% greyscale) effect to an element | Try it |
| w3-hover-sepia | Adds a sepia effect to an element on hover | Try it |
| w3-hover-none | Makes the background transparent and removes the shadow on hover. Does not reset every hover property. | Try it |
Animation Classes
Animation fade in AND out
The w3-animate-fading class fades in and out an element repeatedly.
Note
When the user requests reduced motion, W3.CSS disables the listed animation effects and the input-width transition.
| Class | Description | |
|---|---|---|
| w3-animate-top | Animates an element from the top -300px to 0px | Try it |
| w3-animate-left | Animates an element from left -300px to 0px | Try it |
| w3-animate-bottom | Animates an element from the bottom -300px to 0px | Try it |
| w3-animate-right | Animates an element from right -300px to 0px | Try it |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 | Try it |
| w3-animate-zoom | Animates an element from 0 to 100% in size | Try it |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) | Try it |
| w3-spin | Spin an icon 360 degrees | Try it |
| Spin any element 360 degrees | Try it | |
| w3-animate-input | Expands an input to width:100% when focused, with a width transition. | Try it |
Learn More:
Dark Mode Class
Add w3-dark-mode to the body for a dark page or to a container for a dark section.
The class changes selected variables used by components such as tables, forms, and dropdowns.
Container
Container in dark mode.
Panel
Panel in dark mode.
London
London is the capital of England.
- List in dark mode
- Jill
- Eve
- Adam
| Class | Description | |
|---|---|---|
| w3-dark-mode | Applies dark-mode colors to a page or section. | Try it |
| w3-dark-mode | Example: applying dark mode to a table. | Try it |
Fixed Colors and Dark Mode
Color classes such as w3-blue, w3-text-red, and w3-border-green keep the same colors when dark mode is enabled.
For example, w3-white always gives an element a white background, even inside a dark-mode container.
Learn More:
CSS Variables
A variable stores a value, such as a color or a font size.
W3.CSS uses variables for default fonts, colors, and sizes.
With variables you can customize W3.CSS without editing W3.CSS.
Default Light-Mode Values
| Variable | Value | Controls |
|---|---|---|
| --w3-font-family | Verdana | Body font (+Arial,sans-serif) |
| --w3-heading-font-family | Segoe UI | Heading font (+Arial,sans-serif) |
| --w3-font-size | 15px | Font size |
| --w3-line-height | 1.5 | Line height |
| --w3-content-max-width | 980px | Max-width for w3-content |
| --w3-page-bg | #fff | Page background |
| --w3-text-color | #000 | Text color |
| --w3-surface | #fff | Component surface background |
| --w3-surface-alt | #f1f1f1 | Alternate surface background, table stripes and inline code |
| --w3-codespan-text | #d2143a | Inline code text color |
| --w3-border-color | #ccc | Border color |
| --w3-border-light | #ddd | Table row and list separator color |
| --w3-control-border | #808080 | Bottom border of inputs and selects |
| --w3-hover-bg | #ccc | Hover background |
| --w3-hover-text | #000 | Hover text color |
| --w3-badge-bg | #000 | Badge and tag background |
| --w3-badge-text | #fff | Badge and tag text color |
| --w3-focus-ring | #2196F3 | Keyboard focus outline |
| --w3-accent-color | #2196F3 | Checkbox and radio accent color |
| --w3-danger-bg | #dd0000 | Danger background color |
| --w3-danger-text | #fff | Danger text color |
| --w3-note-bg | #fff599 | Note background color |
| --w3-note-text | #000 | Note text color |
| --w3-info-bg | #0a6fc2 | Info background color |
| --w3-info-text | #fff | Info text color |
| --w3-warning-bg | #ffb305 | Warning background color |
| --w3-warning-text | #000 | Warning text color |
| --w3-success-bg | #008a00 | Success background color |
| --w3-success-text | #fff | Success text color |
Default Dark-Mode Values
| Variable | Value | Controls |
|---|---|---|
| --w3-page-bg | #121212 | Page background |
| --w3-text-color | #f1f1f1 | Text color |
| --w3-surface | #1e1e1e | Component surface background |
| --w3-surface-alt | #2b2b2b | Alternate surface background, table stripes and inline code |
| --w3-codespan-text | #ff8ea2 | Inline code text color |
| --w3-border-color | #555 | Border color |
| --w3-border-light | #444 | Table row and list separator color |
| --w3-hover-bg | #4a4a4a | Hover background |
| --w3-hover-text | #fff | Hover text color |
| --w3-badge-bg | #555 | Badge and tag background |
| --w3-badge-text | #fff | Badge and tag text color |
Dark mode overrides selected variables for page, surface, border, inline-code, badge, and hover colors.
Override dark-mode color values on .w3-dark-mode after loading W3.CSS.
