Engineering
A Reusable Gallery of CSS Effects Worth Keeping
An Angular showcase of copy-ready CSS patterns — text, cards, buttons, loaders, scroll, SVG, and more — organized so you can borrow styles instead of reinventing them.
Most product UIs do not need a neon glitch headline. They do need a small library of proven motion and surface patterns — frosted cards, loading skeletons, focus-friendly inputs, subtle hover affordances — that designers and engineers can reuse without starting from a blank stylesheet every sprint.
css-effects is exactly that: an interactive Angular gallery of self-contained CSS techniques. Open a category, inspect a demo, copy the styles. The source lives at dreamerkumar/css-effects.
How to use this collection
Treat each effect as a reference implementation, not a dependency. Lift the CSS (and minimal markup) into your design system, retokenize colors, and gate motion behind prefers-reduced-motion when you ship to production.
What Is in the Gallery
The home screen groups effects into sections. Each section routes to individual demos — typically one standalone Angular component with styles colocated in the component file, so the “recipe” is easy to extract.
Categories you can browse
- Text — neon, gradient, glitch, wave, typing, shadow, reveal, rainbow, fire, matrix
- Cards — flip, hover, glassmorphism, parallax, morph
- Buttons & inputs — pulse, ripple, liquid, magnetic; floating labels, underline, glow, shake, expand
- Loading — spinner, dots, pulse, progress, skeleton
- Interaction & motion — scroll, hover, transform, cursor (trail, spotlight, magnetic), 3D (cube, fold, carousel, perspective)
- SVG & backgrounds — filters, drawing, patterns, morphing, animated backgrounds
That breadth matters for reuse. A marketing landing page might borrow text and background effects; an admin app might only pull loaders, input focus treatments, and glass or hover cards. One repo covers both without forcing a single aesthetic.
Why Colocated Demos Are Easy to Reuse
Each effect is a small standalone component. Styles sit next to the template — no buried theme file hunting. For example, neon text is essentially layered text-shadow plus a flicker keyframe:
.neon-text {
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa;
animation: flicker 1.5s infinite alternate;
}Glassmorphism is the familiar frosted-panel pattern — translucent fill, blur, and a light border — ready to drop onto a dark hero or modal:
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}Because demos are isolated, you can open the live site, pick the closest visual match, then open the matching file under src/text-effects/, src/card-effects/, and so on.
Practical Reuse Patterns
Do
- Copy the minimal selector set that produces the effect
- Map hard-coded colors to your design tokens / CSS variables
- Keep keyframes named and scoped to avoid collisions
- Respect
prefers-reduced-motion: reducefor continuous animations
Avoid
- Importing the whole Angular app as a “library”
- Shipping decorative motion on every dense data screen
- Leaving neon/rainbow effects in enterprise chrome without brand intent
- Ignoring contrast — glow on light backgrounds often fails accessibility
Suggested “starter kit” from the gallery
- Skeleton / pulse / dots — loading states for lists and dashboards
- Glassmorphism or hover cards — marketing or feature tiles
- Floating / underline inputs — form polish without a new component lib
- Ripple or pulse buttons — clear press feedback
- Gradient or reveal text — sparingly, for heroes and empty states
Structure That Scales as a Reference Repo
Effects are filed by concern (text-effects/, loading-effects/, …), routed lazily, and browsable from a card grid on the home page. That layout is the point of the project as a collection: discoverability first, then copy. When you add your own patterns later, mirror the same folder + demo page shape so the gallery stays searchable for the team.
Product UI note
In CMS and composer products, restraint beats spectacle. Prefer loaders, focus rings, and soft card elevation from this set. Save dramatic text and cursor effects for marketing surfaces — or for deliberate “wow” moments you can turn off with a preference.
Try It
Browse the live gallery, then clone the repo when you want the source next to your editor:
git clone https://github.com/dreamerkumar/css-effects.git
cd css-effects
npm install
npm start
# open http://localhost:4200/Bookmark the categories you actually ship. A curated CSS effects gallery beats another half-finished animation experiment every time you need a skeleton, a glass panel, or a button that feels finished.