chalarangelo/30-seconds-of-css

Analysis updated 2026-06-24

★ 16,047CSSAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((30-seconds-of-css))
    Inputs
      Snippet name
      Tag search
    Outputs
      CSS snippet
      HTML demo
      Codepen preview
    Use Cases
      Look up a layout trick
      Copy a CSS animation
      Learn CSS by example
    Tech Stack
      CSS
      HTML

mindmap root((30-seconds-of-css)) Inputs Snippet name Tag search Outputs CSS snippet HTML demo Codepen preview Use Cases Look up a layout trick Copy a CSS animation Learn CSS by example Tech Stack CSS HTML

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Copy a ready-made CSS layout or animation into a side project

USE CASE 2

Browse short examples to learn modern CSS by reading code

USE CASE 3

Pull idiomatic snippets to teach a CSS workshop

What is it built with?

CSSHTML

How does it compare?

	chalarangelo/30-seconds-of-css	codebyzach/pace	picocss/pico
Stars	16,047	15,616	16,581
Language	CSS	CSS	CSS
Setup difficulty	easy	easy	easy
Complexity	1/5	2/5	2/5
Audience	developer	developer	vibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

This repo is archived. Browse the merged site 30secondsofcode.org instead.

Snippets are CC-BY-4.0. Use them anywhere, including commercial work, as long as you credit the source.

In plain English

30 Seconds of CSS was a collection of short, ready-to-use CSS code snippets covering common web design needs. CSS (Cascading Style Sheets) is the language that controls how websites look, fonts, colors, layouts, animations, and more. This repository gathered bite-sized examples that developers could copy and adapt rather than write from scratch. As of May 2023, this repository has been merged into the larger 30-seconds-of-code project. All the CSS snippets now live there. The combined collection is browsable on 30secondsofcode.org, where you can search by name, tag, or description, and view each snippet with its code, explanation, and a live demo on Codepen. Snippets are licensed under CC-BY-4.0, meaning they are free to use with attribution. This was aimed at web developers and beginners learning CSS who want quick, practical solutions to common styling challenges without having to look up the full syntax from scratch each time.

Copy-paste prompts

Prompt 1

Find me a CC-BY snippet from 30 seconds of code that centers a div both vertically and horizontally

Prompt 2

Show me three 30-seconds-of-code CSS hover animations I can drop into a landing page

Prompt 3

Pull the 30-seconds-of-code recipe for a pure CSS loading spinner and adapt it to my brand colors

Prompt 4

List the most useful 30-seconds-of-code flexbox snippets for a beginner

Frequently asked questions

What is 30-seconds-of-css?

Archived collection of short copy-paste CSS snippets for common web design tasks. Now merged into 30-seconds-of-code at 30secondsofcode.org.

What language is 30-seconds-of-css written in?

Mainly CSS. The stack also includes CSS, HTML.

What license does 30-seconds-of-css use?

Snippets are CC-BY-4.0. Use them anywhere, including commercial work, as long as you credit the source.

How hard is 30-seconds-of-css to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is 30-seconds-of-css for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub chalarangelo on gitmyhub

Verify against the repo before relying on details.