The power of pure CSS
Write, run and share components built only with HTML and CSS. Browse the community library or start creating in seconds.
- Elements
- 171
- Creators
- 1
- Categories
- 15
Browse pure CSS by category
Popular creations
View all →Theme Switch With :has()
by @admin · Layout
Sliding Pill Navigation Indicator
by @admin · Menu
Slide-in Off-Canvas Menu
by @admin · Menu
Peek Card Carousel
by @admin · Cards
Checkbox Toggle Switch
by @admin · Buttons
Rotating Word Ticker
by @admin · Css Animation
Glass Profile Card
by @admin · Cards
Orbit Dots Loader
by @admin · Css Animation
Aurora Mesh Banner
by @admin · Css Animation
Radio Button Tabs
by @admin · Navigation
Styled Range Slider
by @admin · Slider
Neon Sign Flicker
by @admin · Css Animation
Morphing Blob Shape
by @admin · Css Animation
Spinner Trio
by @admin · Loaders
Hexagon Loader Spinner
by @admin · Hexagons
Hexagon Profile Badge
by @admin · Cards
Nested Details Accordion
by @admin · Accordion
Neumorphic Press Button
by @admin · Buttons
Text Roll Button
by @admin · Buttons
Native Popover Menu
by @admin · Menu
Frequently asked questions
What is Purely CSS?
Purely CSS is a free playground and library of pure CSS components. You can browse buttons, loaders, cards, menus and animations built with HTML and CSS only, copy the code, or write and publish your own.
What does pure CSS mean?
Pure CSS means a component is built with only HTML and CSS, with no JavaScript. It loads fast, works in any project and is easy to customize.
Is Purely CSS free to use?
Yes. Browsing, copying code and using the playground are free. Donations are welcome but never required.
How do I use an element in my project?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.
Can I publish my own CSS creations?
Yes. Create a free account, verify your email, write HTML and CSS in the playground and publish it. New elements are reviewed before they appear in the public library.
Do I need JavaScript for these examples?
No. Every element in the library is built with HTML and CSS only, and the site blocks scripts in published elements.