BaselineLab
0Support
BaselineLab

Interactive lab for modern CSS and HTML

Playgrounds and generators for modern CSS and HTML

BaselineLab helps you test emerging CSS and HTML features, preview the result instantly, and copy the generated code without leaving the browser.

Adjust visual controls and validate the result directly in the browser.

Compare physical and logical properties, switch units, and copy the generated CSS.

Use each lab as a generator, a playground, and a quick syntax reference.

CSS corner-shape playground

Experiment with corner-shape and border-radius to build rounded, beveled, notched, or scooped corners by corner or pair with modern CSS.

Ask AI

CSS corner-shape playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
corner-shape
HTML
<div class="corner-shape" dir="ltr"></div>
Tailwind CSS
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<div class="inline-[250px] block-[250px] bg-slate-900 border-2 border-solid border-[#94a3b8] rounded-[40px] [corner-shape:round]" dir="ltr"></div>
CSS
.corner-shape {
  inline-size: 250px;
  block-size: 250px;
  border-radius: 40px;
  corner-shape: round;
  background-color: #0f172a;
  border: 2px solid #94a3b8;
}

Try BaselineLab inside ChatGPT

Ask for an example, experiment with HTML and CSS and continue on the website with the same settings.

See how it works

Explore labs by technology

Start with the live CSS playgrounds available today or jump into the HTML section to follow the next wave of interactive experiments.

Open the active CSS generators to test `accent-color`, `color-mix()`, `contrast-color()`, backgrounds, borders, and spacing, compare modern properties, and copy production-ready code.

Visit the BaselineLab HTML playgrounds section to track how upcoming interactive labs will cover native APIs, elements, and modern markup patterns.

Frequently asked questions about BaselineLab

Find quick answers about how this interactive CSS and HTML lab works, what Baseline means here, and what kind of code you can reuse.

What can you do in BaselineLab?

BaselineLab works as a CSS playground, an HTML playground, and a visual generator for modern web APIs. Each lab lets you tweak controls, preview the result in real time, compare physical and logical properties, and copy the resulting code into real projects.

What does Baseline mean here?

In BaselineLab, Baseline acts as a quick compatibility reference so you can judge whether a modern CSS or HTML feature has enough browser support for current production work. That helps you experiment with new APIs while keeping implementation decisions grounded.

What kind of code can you copy from a lab?

The labs are built to generate production-ready CSS and, when relevant, reusable HTML or markup patterns that are easy to adapt. The goal is to make BaselineLab useful both as a CSS generator and as a practical reference for modern syntax you can ship.

Who is BaselineLab for?

BaselineLab is aimed at front-end developers, technical designers, design system teams, and anyone learning modern CSS and HTML through visual experimentation. It is also useful when you need to evaluate a feature before documenting it or introducing it into a shared component library.

What is the difference between a CSS lab and an HTML lab?

A CSS lab focuses on properties, values, and visual combinations that generate reusable styles, while an HTML lab is more focused on elements, attributes, and native patterns with a stronger structural view. In both cases, BaselineLab is designed to provide context, instant feedback, and copy-friendly code.

Will BaselineLab keep growing?

Yes. BaselineLab is designed as a living foundation for adding new labs, improving existing ones, and refining the experience as modern web APIs evolve.

Behind BaselineLab

Why I created BaselineLab

Sergio Jiménez

Sergio Jiménez

I’m Sergio Jiménez, a Frontend / Full Stack developer with experience in technical teaching. I’ve learned a lot by experimenting with playgrounds published by Google, Apple, and others to showcase web features.

I created BaselineLab to bring that way of learning together in one place: understanding and testing both existing features and new ones as they arrive, whether you’re just starting out or already have experience.

Explore my work

Also created by me · Code Quiz

Keep learning through play

I also created Code Quiz, a question-and-answer game to test your HTML, CSS, and JavaScript knowledge. Another way to keep learning the foundations of the web, with explanations to help you understand every answer.

Play Code Quiz
Code Quiz screen showing HTML, CSS, JavaScript, and mixed quiz subjects.