open_baselinelab
ChatGPTOpen the searchable BaselineLab catalog: Layouts (Grid, Flexbox, Columns, Grid Lanes), Borders (border, border-radius), Colors (color-mix, light-dark, contrast-color), Shadows (box-shadow), HTML Elements (datalist, details, dialog), Attributes and APIs (Popover) Text (text-box, text-wrap), Filters (filter, backdrop-filter), Backgrounds (background-image) and Transforms (transform 2D). Twenty labs total. Use the specific lab tools for configured examples.
show_backdrop_filter_lab
ChatGPTFilter content behind a translucent panel with predefined sample scene/wordmark. Same bounded functions as filter except no dropShadow; panelColor six-digit hex and panelOpacity 0–90%. UI detects native application and reports unsupported effects without claiming native execution. No arbitrary images or code.
show_background_image_lab
ChatGPTUse a predefined sample wordmark/scene. Choose guided position, size, repeat, attachment scroll/fixed/local and outputMode shorthand/longhand. No arbitrary URLs, gradients or code. Returns shared serializer output and matching website URL.
show_border_lab
ChatGPTExplore one border around a square. Choose allWidth 0–48 px, allStyle from native border styles, allColor as a six-digit hex color and shorthand/longhand outputMode. Returns shared HTML/CSS and matching website settings. No arbitrary code.
show_border_radius_lab
ChatGPTRound all corners together or each independently (mode all/individual), pixel radii 0–160 and shorthand/longhand output. The adapter uses physical corners and pixels; continue on the website for other units and logical properties. Returns shared code and matching URL; no arbitrary CSS.
show_box_shadow_lab
ChatGPTCreate one shadow with offsets -48–48 px, blur 0–80 px, spread -40–40 px, six-digit hex color, opacity 0–100, inset and borderRadius 0–80 px. The website URL disables layers 2 and 3 and preserves the exact alpha color. Shared reusable code; no arbitrary CSS.
show_color_mix_lab
ChatGPTMix two six-digit hex colors with independent percentages 0–100 (not both zero), a guided color space and hue interpolation for polar spaces. Returns shared CSS/HTML and matching website URL. A total below 100 adds transparency; other totals normalize proportions. No arbitrary CSS or extra colors.
show_columns_lab
ChatGPTExplore continuous editorial text with CSS Multicolumn. Choose width, count or both, gap, rule, heading span and break avoidance. Returns shared HTML/CSS and an equivalent website URL. No arbitrary code.
show_contrast_color_lab
ChatGPTChoose black/white with contrast-color() for one six-digit hex backgroundColor. Choosing a color does not guarantee sufficient contrast or accessibility. The UI checks native application; an explicitly identified sRGB fallback is preview-only when unsupported. Shared CSS and matching website URL.
show_datalist_lab
ChatGPTExplore native HTML input suggestions. Set inputType, label, placeholder, value, required, autocompleteOff, min/max/step and options (one value | label per line, maximum 24 lines and 1800 characters). Values outside the list are allowed. Native suggestion UI varies by browser and input type. Text is escaped by the shared serializer; no arbitrary HTML, CSS or script.
show_details_lab
ChatGPTNative details/summary with independent, exclusiveAccordion or faq preset. Explicit textDirection, exclusiveName and items override preset defaults. Optional 1–4 items with summary at most 120 characters and content at most 400, escaped as text. The UI checks native name grouping; open/closed preview state is transient and not exported. Shared HTML and matching website URL. No arbitrary code.
show_dialog_lab
ChatGPTExplore a native modal with closedBy any/closerequest/none and optional escaped text: labels 80, title 120 and body 400 characters. Preview detects modal, invokers and closedby separately and reports fixed event fallback when needed. Modal opens/closes and restores focus; navigation cleans it up. Shared declarative HTML; no generated JavaScript execution or arbitrary code.
show_filter_lab
ChatGPTCombine bounded filter functions on predefined sample wordmark/scene or target color. Boolean flags per function. blur 0–24 px, brightness/contrast 0–240%, grayscale/invert/opacity/sepia 0–100%, hueRotate 0–360 degrees, saturate 0–300%; dropShadow offsets -40–40 px and blur 0–48 px. Six-digit hex colors. No arbitrary code or URLs.
show_flexbox_lab
ChatGPTShow Flexbox cards, navigation or a centered item. Adjust direction row/column, wrap, main-axis distribution, cross-axis alignment, gap, items and width. Returns shared HTML/CSS and equivalent website URL. For centering choose justifyContent center, alignItems center and itemCount 1. No arbitrary code.
show_grid_lab
ChatGPTShow a guided Grid example with real text cards or numbers. Presets equal, sidebar, proportional and responsive auto-fit. Adjust alignment, gap, items and width. Span is clamped to fixed column count and disabled for responsive. Returns shared HTML/CSS and equivalent website URL. No arbitrary code; rendering does not verify other browsers.
show_grid_lanes_lab
ChatGPTExplore experimental Grid Lanes with waterfall or brick orientation and guided tracks, width, gap and item count. The UI checks native display and computed tracks; unsupported environments show a notice and a link to the matching example on the website, which also requires a compatible browser. Do not describe fallback as native masonry or infer cross-browser compatibility. Returns guarded shared CSS and equivalent website URL.
show_light_dark_lab
ChatGPTCompare light-dark() colors with scheme light/dark/light dark, lightColor and darkColor as six-digit hex. Colors only; no image variants. UI compares selected, forced light and forced dark schemes and checks native application. Shared code and matching website settings.
show_popover_lab
ChatGPTExplore one declarative HTML popover in auto, hint or manual mode; opening action toggle/show, four guided viewport positions, applyCss, backdrop and animation. Optional labels 80 characters, title 120 and body 400, escaped as text. manual needs explicit dismissal; auto/hint support light dismissal when native. The UI hides unsupported modes and links to the same website settings. Shared HTML/CSS; no generated script execution or arbitrary code.
show_text_box_lab
ChatGPTExplore CSS font-space trimming on a button. Choose textBoxTrim none/trim-start/trim-end/trim-both, guided textBoxEdge and outputMode shorthand/longhand. The UI checks native properties on the rendered button; unavailable adjustments show a notice and website link. Do not infer browser compatibility from the tool result. Returns shared code and equivalent URL.
show_text_wrap_lab
ChatGPTCompare wrap, nowrap, balance, pretty or stable on a localized fixed text sample with previewWidth 240–900. Uses shared HTML/CSS and matching public URL. The UI checks declaration acceptance and computed value; that does not prove a particular wrapping algorithm or cross-browser support. No arbitrary text, HTML, CSS or scripts.
show_transform_lab
ChatGPTExplore only 2D transforms: translateX/Y -80–80 px, rotateZ -180–180 degrees, scaleX/Y -2–2 in steps of 0.05, skewX/Y -45–45 degrees, four guided orders and origin 0–100% or keywords. No 3D/perspective or arbitrary CSS. Shared code and matching website settings.
