chokcoco/css-inspiration

★ 10,867CSSAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((css-inspiration))
    What it does
      Live demos
      Code examples
      Category browsing
    Visual effects
      Shadows and glow
      Filters fire water
      Borders animated
      Backgrounds gradients
    Layouts
      Centering tricks
      Holy grail layout
      Masonry grid
    Audience
      Frontend developers
      UI designers

mindmap root((css-inspiration)) What it does Live demos Code examples Category browsing Visual effects Shadows and glow Filters fire water Borders animated Backgrounds gradients Layouts Centering tricks Holy grail layout Masonry grid Audience Frontend developers UI designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Copy CSS code for neon glow, frosted glass, or animated border effects directly into your own web pages.

USE CASE 2

Browse by category to find unusual CSS filter or shadow techniques for a specific design challenge.

USE CASE 3

Learn what pure CSS can do without JavaScript by reading the live demo source code.

Tech stack

CSS

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

CSS-Inspiration is a collection of CSS visual effects and techniques organized by category, with live online previews for each example. The README is written in Chinese, and the project is aimed at web developers who want to find new ideas for what is possible with CSS, the language that controls how websites look. The collection is organized into topic groups. The layout section covers techniques for centering elements, multi-column designs, masonry-style grids, and classic page structures like the holy grail layout. The shadow section shows how to create neon glow effects, 3D text shadows, layered projections, and animated backgrounds using only CSS shadow properties. A filter section demonstrates visual effects like fire, ghost animations, water drops, and blurred color shadows built with CSS filter functions. The border section covers animated borders, wave effects, and typing cursor effects using only border and outline properties. The background and gradient section includes techniques for frosted glass, light streak animations, repeating geometric patterns, and circular progress rings. Each entry in the catalog links to a live demo page and a code example hosted at csscoco.com. Developers can browse by category or open individual demos to see the technique running in the browser alongside the source code. This is a reference and inspiration resource rather than a software library or tool. There is nothing to install or configure. It is most useful for front-end developers who already know the basics of CSS and want to see creative or unusual applications of properties they may not have used before. The written content is primarily in Chinese, though the code examples are readable to anyone familiar with CSS.

Copy-paste prompts

Prompt 1

I want a neon glow text effect on my website using only CSS. Give me the exact CSS code, including the text-shadow values.

Prompt 2

Show me how to build a frosted glass card panel in pure CSS without any JavaScript or backdrop-filter polyfill.

Prompt 3

Write CSS for an animated typing cursor effect using only border and outline properties, no JavaScript.

Prompt 4

How do I create a masonry-style image grid layout using only CSS, without a JavaScript library?

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.