detailaccordion
Details accordion
A beginner-friendly details accordion you can paste into any page.
A growing library for people who build
Good CSS.
Ready for your next idea.
Explore useful interface patterns, adjust the details, and take clean code straight to your project.
Today's pick
A fresh pattern to try.
Small tools, useful results
Explore the tools.
01
Gradient
Blend two colors into a smooth background.
Open generator 02Box shadow
Give a card soft or punchy depth.
Open generator 03Rounded shape
Make a friendly blob or rounded tile.
Open generator 04Button
Create a clear button with a satisfying hover.
Open generator 05Glass panel
Build a translucent panel for colorful backgrounds.
Open generator 06Border
Create a crisp, soft, or playful CSS border.
Open generator 07Prompt Builder
Shape a clear, useful brief for your next CSS component.
Build a prompt 08Website Showcase
Explore practical website directions and generate a design prompt.
Explore showcasesCopy, edit, make it yours
Useful little recipes.
Vanilla CSS01
Accessible range slider
Style a native range input with a clear label, endpoints, helper text, and strong keyboard focus.
Edit and copyVanilla CSS02
Responsive resource links panel
Present a short, scannable collection of trusted learning links with clear descriptions and keyboard-visible focus.
Edit and copyVanilla CSS03
Responsive business contact card
Give customers a clear business address, direct contact links, and opening hours in one readable, mobile-friendly panel.
Edit and copyVanilla CSS04
Accessible password requirements helper
Explain password rules beside a labelled password field, with readable guidance that works without scripts or color cues.
Edit and copyVanilla CSS05
Accessible quantity selector
Let shoppers adjust an item quantity with a labelled native number field, clear limits, and a small-screen-friendly cart action.
Edit and copyVanilla CSS06
Accessible upload progress card
Show a file’s upload state, filename, size, and numeric progress with native semantic progress and a clear focusable action.
Edit and copyFresh perspective
What's moving the web.
browser features
Firefox 159 turns on scroll-driven animations by default
Firefox 159 enables scroll-driven animations by default, giving teams a chance to add restrained, progressively enhanced scroll timelines while keeping static and reduced-motion states complete.
Read story ui engineeringW3C’s design-system update makes markup part of the system
W3C’s design-system update shows how type tokens, smaller baselines, and semantic markup can make a system easier to evolve.
Read story cssFirefox 158 gives CSS typed arithmetic a practical role
Firefox 158 supports CSS typed arithmetic, letting compatible values become unitless ratios that can be deliberately converted into lengths, angles, and other numeric types.
Read storyStart with a thought