CSS LabWhat is on this site
CSS Lab has eight generators and ten guides. A generator shows the result at once while you move sliders, and gives you the CSS to copy. A guide explains what the properties mean, so that you can change the code with confidence instead of pasting something you do not understand.
| Generator | Writes | Best for |
|---|---|---|
| Gradient | linear-gradient, radial-gradient, conic-gradient | Backgrounds, buttons, pie charts |
| Box shadow | box-shadow | Cards, buttons, inputs |
| Flexbox | display: flex and its container properties | Rows, columns, navigation bars |
| Grid | display: grid, columns, gap | Galleries, page layouts |
| Clip-path | clip-path | Hexagons, stars, arrows, diagonal edges |
| Glassmorphism | backdrop-filter and a translucent panel | Frosted cards over photos |
| Animation | @keyframes and animation | Entrance and attention effects |
| Border-radius | the eight-value border-radius | Blobs, pills, circles |
How to use the generated code
- Move the controls until the preview looks right.
- Press Copy under the code box.
- Paste it into the rule for your element, for example
.card { ... }in your stylesheet. In Blogger, add it in Theme, then Customise, then Advanced, then Add CSS. - Reload your page and look at it on a phone as well as a computer.
Why we explain every value
Generators are easy to find. What is rare is a clear explanation of the output. Every generator page here says what each number does, what mistakes it commonly causes, and how to adapt the result, and the guides go deeper. That makes the code easier to fix when something looks different on your page.
Frequently asked questions
Is the CSS free to use?
Yes. Use the output on any personal or commercial page. You do not need to credit us.
Does it need a sign-in or install?
No. It works in the browser, even without an internet connection after the page has loaded.
Will the code work in every browser?
We tested the output in current Chrome and WebKit (Safari's engine). Older browsers may lack some features such as backdrop-filter or conic-gradient, and the guides say where to add a fallback.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.