CSS Examples

Free CSS examples — copy & paste code for your website.

Filter by:

Color
- Background color
- Text color
- Border color
- Caret color
- Column rule color
- Outline color
- Text decoration color
- Text shadow color
- Filter
- Opacity/transparency
Lists
- List with circle bullets
- List with image bullets
- List style position
- List style shorthand
- Unstyled lists
- Inline lists
Backgrounds
- Background image — whole page
- Background image — all instances of an element
- Background image — using a class
- Background image — using an ID
- Background image — non-repeating
- Background image — blended with background color
- Mix an element with the backdrop
- Background color — whole page
- Background color — all instances of an element
- Background color — using a class
- Background color — using an ID
Gradients
- Linear gradient — default, 2 colors
- Linear gradient — 3 colors inc transparent
- Linear gradient — offset
- Linear gradient — to bottom
- Linear gradient — to top
- Linear gradient — to right
- Linear gradient — to left
- Linear gradient — to bottom, right
- Linear gradient — to bottom, left
- Linear gradient — specific angle
- Repeating linear gradient
- Repeating linear gradient — diagonal
- Radial gradient
- Radial gradient — circle
- Repeating radial gradient
- Repeating radial gradient — circle
Borders
- Border color
- Border style
- Border width
- Border radius (rounded corners)
- Border image
- Border collapse
Margins
- Same margin on all sides
- Different margin on all sides
- Margin — top
- Margin — right
- Margin — bottom
- Margin — left
- Margin — auto
Padding
- Same padding on all sides
- Different padding on all sides
- Padding — top
- Padding — right
- Padding — bottom
- Padding — left
Text
- Font size
- Bold text
- Italic text
- Font family
- Font family — using Google Fonts
- Small-caps
- Small-caps vs all-small-caps
- Font shortcut property
- Text color
- Text background color
- Text shadows
- Text indent
- Line height
- Letter spacing
- Word spacing
- Text decoration
- Text alignment — center
- Text alignment — right
- Text alignment — justify
CSS Grid — Photo Gallery Examples
- Responsive - Using same-size images
- Responsive - Align items to stretch (default)
- Responsive - Align items to start
- Responsive - Align items to center
- Responsive - Align items to end
- Responsive - Span 5 columns
- Responsive - Span 3 columns, 2 rows
- Responsive - Span 3 columns, 3 rows
- Fluid - Using same-size images
- Fluid - Align & justify items stretch
- Fluid - Align & justify items start
- Fluid - Align & justify items center
- Fluid - Align & justify items end
- Fluid - Span 5 columns
- Fluid - Span 3 columns, 2 rows
- Fluid - Span 3 columns, 3 rows
CSS Grid — Card Examples
- Responsive cards — Align items to stretch (default)
- Responsive cards — Align items to start
- Responsive cards — Align items to center
- Responsive cards — Align items to end
- Responsive cards — Span 2 columns
- Responsive cards — Span 2 rows
- Responsive cards — Span 2 columns, 2 rows
- Fluid cards — Align items to stretch (default)
- Fluid cards — Align items to start
- Fluid cards — Align items to center
- Fluid cards — Align items to end
- Fluid cards — Span 2 columns
- Fluid cards — Span 2 rows
- Fluid cards — Span 2 columns, 2 rows
CSS Grid — Forms
- Auto-placement form example 1
- Auto-placement form example 2
- Auto-placement form example 3
- Explicitly placed form example 1
- Explicitly placed form example 2
- Explicitly placed form example 3
CSS Grid — Website Layouts
- Website layout template 1
- Website layout template 2
- Website layout template 3
- Website layout template 4
- Website layout template 5
- Website layout template 6
- Website layout template 7
- Website layout template 8
- Website layout template 9
- Website layout template 10
- Website layout template 11
- Website layout template 12
CSS Grid — 12 Column Grids
- 12 column grid - Basic example
- 12 column grid - Responsive (media query)
- 12 column grid - Mobile first
- 12 column grid - Vertical
- 12 column grid - Vertical responsive (media query)
- 12 column grid - Vertical mobile first
- 12 column grid - Example 2
- 12 column grid Example 2 - Responsive (media query)
- 12 column grid example 2 - Mobile first
Flexbox — Photo Gallery Examples
- Flex-direction row
- Flex-direction column
- Align items stretch
- Align items flex-start
- Align items flex-end
- Flexbox — Align items center
Flexbox — Card Examples
- Cards — Align items stretch
- Cards — Align items flex-start
- Cards — Align items flex-end
- Cards — Align items center
- Cards — Double-width
- Cards — Flex direction column
Flexbox — Grids
- Random grid
- 12 column grid 1
- 12 column grid 2
- Vertical 12 column grid 1
- Vertical 12 column grid 2
- Nested grid
Flexbox — Media Objects
- Image on left
- Image on right
- Nested media objects
- Using HTML entity instead of image
- Using Unicode emoji instead of image
Flexbox — Website Layout Examples
- Layout 1
- Layout 2
- Layout 3
- Layout 4
- Holy grail layout (method 1)
- Holy grail layout (method 2)
Flexbox — Form Examples
- Navbar form with adjacent search
- Basic form 1
- Basic form 2
- Form with stretchy textarea
- Form with stretchy textarea 2
- More form elements
CSS Animatable Properties
- background
- background-color
- background-position
- background-size
- border
- border-color
- border-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-width
- border-left
- border-left-color
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-width
- border-spacing
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-width
- bottom
- box-shadow
- caret-color
- clip
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-width
- columns
- content
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font
- font-size
- font-size-adjust
- font-stretch
- font-weight
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-column
- grid-gap
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-row
- grid-template-areas
- grid-template-columns
- grid-template-rows
- grid-template
- grid
- height
- left
- letter-spacing
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-width
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- quotes
- right
- tab-size
- text-decoration
- text-decoration-color
- text-indent
- text-shadow
- top
- transform
- vertical-align
- visibility
- width
- word-spacing
- z-index
Functions
- attr()
- blur()
- brightness()
- calc()
- calc() — Calculate margins
- calc() — Position background image
- circle()
- contrast()
- counter()
- counters()
- cubic-bezier()
- drop-shadow()
- ellipse()
- grayscale()
- hsl()
- hsla()
- hue-rotate()
- hwb()
- image()
- inset()
- invert()
- linear-gradient()
- matrix()
- matrix3d()
- opacity()
- perspective()
- polygon()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rgba()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- saturate()
- sepia()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- symbols()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- url()
Selectors
- Universal selector
- Element selector
- Element selector — list of elements
- Attribute selector — attribute presence
- Attribute selector — exact value
- Attribute selector — find a word within a list
- Attribute selector — multiple attributes
- Attribute selector — language subcode matching
- Attribute selector substring matching — starts with value
- Attribute selector substring matching — ends with value
- Attribute selector substring matching — contains value
- Class selector
- Class selector — limited to a specific element
- Class selector — match multiple classes
- ID selector
- ID selector — limited to a selected element
- Pseudo-class
- Pseudo-class — target
- Pseudo-class — language
- Pseudo-class — enabled/disabled
- Pseudo-class — checked
- Pseudo-class — negation
- Pseudo-class — nth-child alternating rows (odd/even)
- Pseudo-class — nth-child alternating three rows
- Pseudo-class — nth-child (specific child)
- Pseudo-class — first-child
- Pseudo-class — last-child
- Pseudo-class — nth-last-child
- Pseudo-class — nth-last-child alternating rows (odd/even)
- Pseudo-class — nth-of-type
- Pseudo-class — nth-of-type alternating odd/even images
- Pseudo-class — nth-of-type alternating three images
- Pseudo-class — nth-last-of-type
- Pseudo-class — nth-last-of-type alternating odd/even images
- Pseudo-class — nth-last-of-type alternating three images
- Pseudo-class — first-of-type
- Pseudo-class — last-of-type
- Pseudo-class — only-child
- Pseudo-class — only-of-type
- Pseudo-class — empty
- Pseudo-class — adjacent sibling combinator
- Pseudo-element — first-line
- Pseudo-element — first-letter
- Pseudo-element — before (unicode)
- Pseudo-element — after (unicode)
- Pseudo-element — before/after (open and closing quotes)
- Adjacent sibling combinator selector
- General sibling combinator selector
- Descendant combinator selector
- Child combinator selector

Most of these examples use embedded style sheets. You may wish to transfer these to an external style sheet.

CSS Examples

Backgrounds

Padding

Text