chalarangelo/30-seconds-of-css

★ 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

Things people build with this

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

Tech stack

CSSHTML

Getting 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

Open on GitHub → Explain another repo

← chalarangelo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.