splash-leaves-1splash-blob

30 seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Snippet List

Click on a snippet’s name to view its code or a tag name to view all snippets in that category.

Animation

Bouncing loader

Creates a bouncing loader animation.

Demo

View snippet

Button border animation

Creates a border animation on hover.

Demo

View snippet

Donut spinner

Creates a donut spinner that can be used to indicate the loading of content.

Demo

View snippet

Easing variables

Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.

Demo
Hover

View snippet

Height transition

Transitions an element's height from 0 to auto when its height is unknown.

Demo
Hover me to see a height transition.
content

View snippet

Hover shadow box animation

Creates a shadow box around the text when it is hovered.

Demo

Box it!

View snippet

Hover underline animation

Creates an animated underline effect when the text is hovered over.

Credit: https://flatuicolors.com/

Demo

Hover this text to see the effect!

View snippet

Interactivity

Disable selection

Makes the content unselectable.

Demo

You can select me.

You can't select me!

View snippet

Popout menu

Reveals an interactive popout menu on hover and focus.

Demo
Popout menu

View snippet

Sibling fade

Fades out the siblings of a hovered item.

Demo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

View snippet

Layout

Box-sizing reset

Resets the box-model so that widths and heights are not affected by their borders or padding.

Demo
border-box
content-box

View snippet

Clearfix

Ensures that an element self-clears its children.

Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
Demo
float a
float b
float c

View snippet

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

Demo

View snippet

Display table centering

Vertically and horizontally centers a child element within its parent element using display: table (as an alternative to flexbox).

Demo
Centered content

View snippet

Evenly distributed children

Evenly distributes child elements within a parent element.

Demo

Item1

Item2

Item3

View snippet

Fit image in container

Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.

Demo

View snippet

Flexbox centering

Horizontally and vertically centers a child element within a parent element using flexbox.

Demo
Centered content.

View snippet

Ghost trick

Vertically centers an element in another.

Demo

Vertically centered without changing the position property.

View snippet

Grid centering

Horizontally and vertically centers a child element within a parent element using grid.

Demo
Centered content.

View snippet

Last item with remaining available height

Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.

Demo
Div 1
Div 2
Div 3

View snippet

Offscreen

A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility (ADA) development when more context is needed for visually-impaired users. As an alternative to display: none which is not readable by screen readers or visibility: hidden which takes up physical space in the DOM.

Demo

View snippet

Transform centering

Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table). Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.

Demo
Centered content

View snippet

Truncate text multiline

If the text is longer than one line, it will be truncated for n lines and end with an gradient fade.

Demo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

View snippet

Truncate text

If the text is longer than one line, it will be truncated and end with an ellipsis .

Demo

If I exceed one line's width, I will be truncated.

View snippet

Other

Calc()

The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.

Demo

View snippet

Custom variables

CSS variables that contain specific values to be reused throughout a document.

Demo

CSS is awesome!

View snippet

Visual

Circle

Creates a circle shape with pure CSS.

Demo

View snippet

Counter

Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.

Demo
  • List item
  • List item
  • List item
    • List item
    • List item
    • List item

View snippet

Custom scrollbar

Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.

Demo

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

View snippet

Custom text selection

Changes the styling of text selection.

Demo

Select some of this text.

View snippet

Dynamic shadow

Creates a shadow similar to box-shadow but based on the colors of the element itself.

Demo

View snippet

Etched text

Creates an effect where text appears to be "etched" or engraved into the background.

Demo

I appear etched into the background.

View snippet

Focus Within

Changes the appearance of a form if any of its children are focused.

Demo

View snippet

Fullscreen

The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.

Demo

Click the button below to enter the element into fullscreen mode.

I change color in fullscreen mode!


View snippet

Gradient text

Gives text a gradient color.

Demo

Gradient text

View snippet

Hairline border

Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.

Demo
text

View snippet

Mouse cursor gradient tracking

A hover effect where the gradient follows the mouse cursor.

Credit: Tobias Reich

Demo

View snippet

:not selector

The :not psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.

Demo
  • One
  • Two
  • Three
  • Four

View snippet

Overflow scroll gradient

Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

Demo
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

View snippet

Pretty text underline

A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.

Demo

Pretty text underline without clipping descending letters.

View snippet

Reset all styles

Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.

Demo
Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

View snippet

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

Demo

View snippet

System font stack

Uses the native font of the operating system to get close to a native app feel.

Demo

This text uses the system font.

View snippet

Toggle switch

Creates a toggle switch with CSS only.

Demo

View snippet

Triangle

Creates a triangle shape with pure CSS.

Demo

View snippet

Zebra striped list

Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.

Demo
  • Item 01
  • Item 02
  • Item 03
  • Item 04
  • Item 05

View snippet


About

A few word about us, our goals and our projects.