Explore 319 CSS properties with clear explanations, searchable categories, copy-ready examples and a hands-on live CSS playground.
From display and flexbox to animations and typography, find the right declaration and test it instantly. No account needed.
Search names, explanations, or choose a category.
No matching properties
Try another keyword or select All properties.
Chooses an element's layout mode, such as block, flex, grid or none.
Edit the value below or tap a preset. Some properties need specific layout contexts or browser support to produce a visible effect.
The property is applied to the blue preview element.
.demo-element {
display: grid;
}Use this declaration in your own stylesheet. Try another property using the directory on the left.
Ever stared at a CSS property and wondered what it actually does? You're in the right place. The UtilityGlen CSS Properties & Values Guide turns technical syntax into something you can search, understand, experiment with, and use in your next project.
Explore 319 documented CSS properties, organized into 12 categories, with useful explanations, editable values, live browser previews, and copy-ready CSS examples.
Whether you're learning CSS for the first time or hunting down a forgotten property, this reference helps connect the code you write with the result you see.
Search property names and explanations instead of scrolling
through an endless reference. Looking for
border-radius
or
overflow?
Find it quickly.
Experiment with property values in a live CSS playground. The guide uses different demo elements for layouts, typography, images, tables, and other contexts.
Jump between CSS Grid, Flexbox, sizing, spacing, typography, colors, transforms, animation, positioning, and advanced styling concepts.
Each selected property comes with an editable value and a CSS code example. Copy the declaration, adapt the selector, and continue building.
A CSS property is an instruction that tells a browser which aspect of an HTML element you want to style. Properties control everything from text color and spacing to page layout, visual effects, and animation.
Each declaration has a property name, a colon, a value, and usually a semicolon. Together, they form the building blocks of CSS styling.
For example, color: blue;
sets text color, while
padding: 20px;
adds inner spacing.
.my-button {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 12px;
font-weight: 700;
}How the browser renders it
My ButtonCSS determines appearance; HTML provides structure.
You don't need to memorize CSS syntax. Follow these four steps to look up a CSS property, experiment with its values, and bring your new styling into a real website.
Enter a property such as display,
transform, or font-size.
Alternatively, filter by category.
Choose a result to see its description, sample value, suggested presets, and available preview.
Edit the value or choose a preset. Observe the preview and read the status message for browser support or context requirements.
Copy the CSS example, apply it to the relevant selector, and test it within your own page layout.
The best way to understand CSS isn't to memorize a definition. It's to connect each declaration with the layout behavior it creates.
Every CSS box consists of content, padding, a border, and a margin. Understanding these layers is essential for controlling element spacing and dimensions.
margin
padding
box-sizing
display: flex;
Flexbox is useful for navigation bars, button groups, toolbars, and other layouts where items need flexible alignment along a main axis.
justify-content
align-items
gap
display: grid;
CSS Grid excels at controlling rows and columns together. Use it for dashboards, image galleries, page layouts, and responsive card collections.
grid-template-columns
grid-auto-flow
gap
Some of the most frustrating CSS bugs come from choosing a property that sounds right but behaves differently. These quick comparisons can help you choose the right approach.
| CSS Properties | What's the Difference? | When to Use Them |
|---|---|---|
margin
vs padding
|
Margin creates space outside an element's border. Padding adds space between the content and its border. | Use margin for outside spacing and padding for breathing room within an element. |
display: flex
vs display: grid
|
Flexbox primarily arranges items along one axis. Grid provides explicit control over rows and columns. | Flex for toolbars and small groups; Grid for structured two-dimensional layouts. |
width
vs max-width
|
Width specifies an element's preferred width. Max-width places an upper limit on its used width. |
Combine width: 100% with
max-width for flexible containers.
|
gap
vs margin
|
Gap creates spacing between items in supported layout containers. Margin belongs to individual boxes. | Use gap for consistent Flexbox or Grid spacing, and margin for independent element spacing. |
opacity: 0
vs display: none
|
Opacity makes an element transparent without removing its layout space. Display none removes the element's box from layout. | Use opacity for transparency effects. Use display none when the element should not participate in layout. |
fixed
vs sticky
|
Fixed positioning is normally relative to the viewport. Sticky positioning behaves according to its scroll container and configured offset. | Use fixed for persistent floating controls; sticky for headings that stick while scrolling. |
Quick tip: CSS properties often depend on the parent element, layout mode, and surrounding content. If a declaration has no visible effect, check its context before assuming the syntax is wrong.
Ready to turn theory into something useful? These three practical CSS patterns demonstrate how different properties work together to solve everyday design problems.
Create flexible columns that automatically adapt to available space without fixed desktop breakpoints.
.card-grid {
display: grid;
grid-template-columns:
repeat(auto-fit,
minmax(min(100%, 14rem), 1fr));
gap: 1rem;
}
Use clamp() to create fluid text sizes
that grow with the viewport while respecting
minimum and maximum values.
h1 {
font-size:
clamp(1.75rem, 4vw, 3.5rem);
line-height: 1.15;
letter-spacing: -0.03em;
}
Style the focus indicator for keyboard navigation
with :focus-visible and CSS outline
properties.
button:focus-visible {
outline:
3px solid #059669;
outline-offset: 4px;
border-radius: 10px;
}You don't need to learn hundreds of properties in one sitting. Start with the ones you'll use most often, then expand into layout systems, responsive design, and advanced effects.
Start with colors, typography, dimensions, and basic spacing.
color
background
font-size
padding
margin
border
Learn responsive layouts, alignment, positioning, and sizing behavior.
display
flex
grid
position
overflow
max-width
Explore effects, motion, containment, and more specialized CSS features.
transform
animation
filter
contain
clip-path
container-type
Confused about units, inheritance, positioning, or browser behavior? Here are practical answers to questions developers encounter while writing CSS.
First identify what you want to change. For spacing,
explore margin, padding,
and gap. For alignment, start with
justify-content and align-items.
For visual effects, look at transform,
filter, and box-shadow.
Use the searchable CSS property directory above to compare descriptions, select a property, and experiment with values before adding the declaration to your project.
px represents CSS pixels.
em is relative to a font-size context,
depending on the property.
rem is relative to the root element's
font size. Percentage values depend on the property
and its reference dimension.
The fr unit represents a fraction of
available space in CSS Grid tracks. For example,
grid-template-columns: 1fr 2fr
creates tracks with a one-to-two fractional ratio
of the available track-sizing space.
Common causes include an invalid value, a more specific CSS declaration taking precedence, the wrong HTML element, missing layout context, or unsupported browser features.
Check the browser's developer tools and computed styles.
Also inspect the element's parent container.
For example, align-items works in supported
alignment contexts, not as a universal instruction
for every ordinary block element.
One common approach is to use Flexbox on the parent:
display: flex; justify-content: center;
align-items: center;. Another approach is
CSS Grid with
display: grid; place-items: center;.
To horizontally center a block element of suitable
constrained width, margin-inline: auto
is often enough. The best technique depends on
whether you need horizontal or vertical centering
and which element you are centering.
Yes. CSS custom properties allow reusable values
defined with names beginning with two hyphens.
For example, declare
--brand-color: #2563eb; and use
color: var(--brand-color);.
Custom properties participate in the cascade and inheritance rules. They're particularly useful for themes, component design systems, and consistent colors or spacing.
Specificity helps determine which competing CSS declarations win when rules target the same element. ID selectors generally have greater specificity than class selectors, which generally outrank type selectors.
Specificity is only one part of the cascade.
Origin, importance, cascade layers, scoping,
and declaration order also matter.
When a style doesn't appear, inspecting the
winning declaration is more reliable than
immediately adding !important.
Absolutely. CSS provides powerful responsive
layout features, including Flexbox, Grid,
relative sizing, media queries, container queries,
and functions such as min(),
max(), and clamp().
A responsive layout can often adapt without JavaScript. However, some container-query effects require a properly configured query container, while media queries depend on the conditions being evaluated.
No. The live preview uses your current browser's rendering engine, so it can demonstrate many CSS effects but cannot guarantee identical behavior across browsers, operating systems, and devices.
The guide reports invalid values and explains certain context-dependent examples. For production websites, also test in your supported browsers, examine accessibility behavior, and consult current browser compatibility documentation.
No. UtilityGlen's CSS Properties & Values Guide is a free browser-based reference. You can search properties, choose presets, edit values, and copy examples without creating an account.
The CSS preview itself runs in your browser. There's no need to upload your stylesheet to experiment with individual declarations.
Pick a property you haven't used before. Change a value. Watch what happens. Discover how one small declaration can transform an entire interface.
Explore the UtilityGlen CSS reference, experiment with browser-rendered examples, and build your next design with more confidence.
Handy web tools for daily use. Everything runs right in your browser—no sign-ups, no cloud uploads, and your data stays entirely on your device.