Modern CSS

https://modern-css.com
Admin
Modern CSS provides copy-paste ready CSS and JavaScript patterns, offering clean, native...
Tokens:511,321
Snippets:6,772
Trust Score:6.4
Update:6 days ago
Show doc for...
Tokens:
Raw
### Quick example: flex-basis with flex-grow

Source: https://modern-css.com/reference/properties/flex-basis

Sets flex-basis to 300px and flex-grow to 1, so the item starts at 300px and then grows to fill available space.

```css
.flex-item {
  flex-basis: 300px;
  flex-grow: 1;
} /* starts at 300px, then grows to fill space */
```

--------------------------------

### Quick example: grid-row with span

Source: https://modern-css.com/reference/properties/grid-row

Shows the basic shorthand syntax using a start line and a span value. The item starts at row 1 and spans 2 rows down.

```css
.hero-image {
  grid-row: 1 / span 2;
} /* starts at row 1 and spans 2 rows down */
```

--------------------------------

### Quick example of @starting-style

Source: https://modern-css.com/reference/at-rules/starting-style

Defines transition and starting styles for an element's entry animation. The @starting-style block applies styles the moment the element is created or displayed.

```css
div {
  transition: opacity 0.5s, transform 0.5s;
  opacity: 1;
  transform: scale(1);

  /* Styles applied the moment the element is created/displayed */
  @starting-style {
    opacity: 0;
    transform: scale(0.9);
  }
}
```

--------------------------------

### Quick example: word-break: break-all

Source: https://modern-css.com/reference/properties/word-break

A minimal example showing how to apply word-break: break-all to a class. This forces breaks at any character.

```css
.long-url { word-break: break-all; }
```

--------------------------------

### Set border-block-start-style to dotted

Source: https://modern-css.com/reference/properties/border-block-start-style

Example showing how to set the start side border style to dotted, along with width and color.

```css
article {
  border-block-start-style: dotted;
  border-block-start-width: 2px;
  border-block-start-color: #94a3b8;
}
```

--------------------------------

### Quick example: button:is()

Source: https://modern-css.com/reference/selectors/is

A concise example showing how to use :is() to group related button selectors in a single rule.

```css
button:is(.primary, .secondary, .tertiary) { padding: 0.5rem 1rem; }
```

--------------------------------

### Example: wrapper with display: contents

Source: https://modern-css.com/grid-layout-without-extra-wrappers

A minimal example showing the wrapper element that uses display: contents. The comment indicates the wrapper is the target.

```css
/* wrapper */ .contents
```

--------------------------------

### Quick example: button:focus-visible

Source: https://modern-css.com/reference/selectors/focus-visible

A minimal example showing how to style the focus indicator for keyboard navigation on a button. Sets a blue outline with an offset.

```css
button:focus-visible { outline: 3px solid #4A90E2; outline-offset: 2px; }
```

--------------------------------

### CSS padding-inline-start example

Source: https://modern-css.com/reference/properties/padding-inline-start

Example showing how to use padding-inline-start to add logical padding to an element. For left-to-right text, this is padding-left; for right-to-left, it is padding-right.

```css
.navigation-item {
  /* Adds space on the left (for LTR) or right (for RTL) logically */
  padding-inline-start: 1rem;
}
```

--------------------------------

### CSS border shorthand example

Source: https://modern-css.com/reference/properties/border

A basic example showing how to set the border width, style, and color for a button class using a CSS variable.

```css
.btn {
  border: 2px solid var(--accent);
  /* width | style | color */
}
```

--------------------------------

### Quick example: align-items: center

Source: https://modern-css.com/reference/properties/align-items

A minimal example showing how to center items vertically in a flex row container using align-items: center.

```css
.container {
  display: flex;
  align-items: center;
} /* centers items vertically in a row container */
```

--------------------------------

### Quick example: @media (min-resolution: 2dppx)

Source: https://modern-css.com/reference/types/resolution

Applies styles only to high-density (Retina) displays. The example sets a higher-resolution background image for .icon when the device pixel density is at least 2dppx.

```css
@media (min-resolution: 2dppx) {
  /* Styles applied only to high-density/Retina displays */
  .icon {
    background-image: url('icon-2x.png');
  }
}
```

--------------------------------

### Set logical start border width

Source: https://modern-css.com/reference/properties/border-block-start-width

Use border-block-start-width to set the thickness of the logical start border. This example also sets the style and color for a complete border.

```css
header {
  /* Logical top border */
  border-block-start-width: 2px;
  border-block-start-style: solid;
  border-block-start-color: #333;
}
```

--------------------------------

### CSS margin-inline-start example

Source: https://modern-css.com/reference/properties/margin-inline-start

Sets the margin-inline-start to 40px on a blockquote element, logically indenting it from the start of the line.

```css
blockquote {
  /* Indents the blockquote from the start of the line logically */
  margin-inline-start: 40px;
}
```

--------------------------------

### Quick example of <length-percentage>

Source: https://modern-css.com/reference/types/length-percentage

Shows a CSS rule using a length-percentage for width with calc() and a percentage for padding.

```css
.box {
  /* Uses a length-percentage for width */
  width: calc(100% - 40px);
  padding: 5%;
}
```

--------------------------------

### Set ruby-position to under

Source: https://modern-css.com/reference/properties/ruby-position

Places the pronunciation guide below the character instead of above it. This is a quick example of using the 'under' value.

```css
ruby {
  /* Places the pronunciation guide below the character instead of above it */
  ruby-position: under;
}
```

--------------------------------

### Set up multi-column text layout with columns: 3 200px

Source: https://modern-css.com/reference/properties/columns

Use the columns shorthand to create a multi-column layout. The example sets up to 3 columns, each at least 200px wide, with a 2rem gap between columns.

```css
.multi-column-text {
  columns: 3 200px;
  /* sets up to 3 columns, each at least 200px wide */
  column-gap: 2rem;
}
```

--------------------------------

### Example: Explicit start and end

Source: https://modern-css.com/reference/properties/grid-row

Places the item starting at row line 1 and ending at row line 3, covering two rows (line 1 to line 3 spans two cells).

```css
.hero {
  grid-row: 1 / 3;
}
```

--------------------------------

### ruby-overhang: none Example

Source: https://modern-css.com/reference/properties/ruby-overhang

Prevents the tiny guide text from overlapping nearby characters by setting ruby-overhang to none.

```css
ruby {
  /* Prevents the tiny guide text from overlapping nearby characters */
  ruby-overhang: none;
}
```

--------------------------------

### Quick example: grid-template-columns with fixed and flexible columns

Source: https://modern-css.com/reference/properties/grid-template-columns

Sets up a grid container with one fixed 200px column and two flexible 1fr columns. The comment notes one fixed column and two flexible ones.

```css
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
} /* one fixed column, two flexible ones */
```

--------------------------------

### Quick example of :any-link

Source: https://modern-css.com/reference/selectors/any-link

Basic usage of :any-link to style all links, with a separate rule for visited links using :any-link:visited.

```css
:any-link { color: blue; }
:any-link:visited { color: purple; }
```

--------------------------------

### ruby-align: space-around example

Source: https://modern-css.com/reference/properties/ruby-align

Sets ruby-align to space-around to spread the pronunciation guide evenly over the character. This is the initial value of the property.

```css
ruby {
  /* Spreads out the pronunciation guide evenly over the character */
  ruby-align: space-around;
}
```

--------------------------------

### Set logical start border width with border-inline-start-width

Source: https://modern-css.com/reference/properties/border-inline-start-width

Use this CSS rule to set the thickness of the logical start border, which flips to the right in RTL languages. The example also sets the border style and color to fully define the border.

```css
.side-accent {
  /* Logical left border thickness */
  border-inline-start-width: 8px;
  border-inline-start-style: solid;
  border-inline-start-color: #ec4899;
}
```

--------------------------------

### Quick example of flex-wrap: wrap

Source: https://modern-css.com/reference/properties/flex-wrap

Shows a flex container with flex-wrap: wrap, allowing items to move to the next row when they run out of space.

```css
.container {
  display: flex;
  flex-wrap: wrap;
  /* allows items to move to the next row */
}
```

--------------------------------

### break-before: always example

Source: https://modern-css.com/reference/properties/break-before

Ensures every chapter starts at the top of a new page by setting break-before to always on the .chapter-title class.

```css
.chapter-title {
  /* Ensures every chapter starts at the top of a new page */
  break-before: always;
}
```

--------------------------------

### Quick example: view-timeline-inset with 20% offset

Source: https://modern-css.com/reference/properties/view-timeline-inset

Sets view-timeline-name to --reveal and view-timeline-inset to 20%, starting the animation when the element is 20% into the scroll container.

```css
.reveal-section {
  view-timeline-name: --reveal;
  /* Starts the animation when the element is 20% into the scroll container */
  view-timeline-inset: 20%;
}
```

--------------------------------

### @import Quick Example

Source: https://modern-css.com/reference/at-rules/import

Shows how to import multiple style sheets at the top of a CSS file, including a conditional import based on screen size.

```css
@import url('variables.css');
@import url('components/buttons.css');
@import url('layout.css') screen and (min-width: 768px);
/* imports styles conditionally based on screen size */
```

--------------------------------

### CSS example: text-spacing-trim with trim-start

Source: https://modern-css.com/reference/properties/text-spacing-trim

Applies text-spacing-trim: trim-start to an article with class cjk-text to trim extra space from the start of the first line for a cleaner edge.

```css
article.cjk-text {
  /* Trims the extra space from the start of the first line for a cleaner edge */
  text-spacing-trim: trim-start;
}
```

--------------------------------

### CSS animation-delay quick example

Source: https://modern-css.com/reference/properties/animation-delay

Sets a 0.5s delay before the fade animation starts. The animation uses the 'forwards' fill mode to retain the final state.

```css
.fade-in {
  animation: fade 1s forwards;
  /* Waits 0.5s before fading in */
  animation-delay: 0.5s;
}
```

--------------------------------

### Quick example of <time-percentage>

Source: https://modern-css.com/reference/types/time-percentage

Shows the syntax for using a time-percentage value in the animation-duration property, allowing either a percentage or a time unit.

```css
animation-duration: 50% | 2s;
```

--------------------------------

### @starting-style Interop

Source: https://modern-css.com/whats-new-in-css-2026

Enable entry animations from display: none using @starting-style. This example animates a dialog's opacity and scale when opened.

```css
dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}
```

--------------------------------

### view-timeline quick example

Source: https://modern-css.com/reference/properties/view-timeline

Defines a scroll timeline named --reveal on the block axis and applies it to the animation-timeline property, so the animation starts when the element enters the viewport.

```css
.revealing-box {
  view-timeline: --reveal block;
  animation-timeline: --reveal;
  /* animation starts when the box enters the viewport */
}
```

--------------------------------

### border-inline-start quick example

Source: https://modern-css.com/reference/properties/border-inline-start

Sets the start-side border in the inline dimension using the logical property border-inline-start. This is the logical equivalent of border-left, with a 5px solid indigo border and matching padding and background.

```css
.callout {
  /* Logical equivalent of border-left */
  border-inline-start: 5px solid #6366f1;
  padding-inline-start: 1.5rem;
  background: #f5f3ff;
}
```

--------------------------------

### Set offset-position to top-left corner

Source: https://modern-css.com/reference/properties/offset-position

Sets the motion path starting position to the top-left corner of the container using the value '0 0'. This is a quick example of the offset-position property.

```css
.moving-object {
  /* Starts the motion path from the top-left corner of the container */
  offset-position: 0 0;
}
```

--------------------------------

### Quick example of <frequency-percentage> usage

Source: https://modern-css.com/reference/types/frequency-percentage

Shows the syntax for using <frequency-percentage> in the speech-rate property, allowing either a percentage or a frequency value.

```css
speech-rate: 100% | 2000Hz;
```

--------------------------------

### Example: Span multiple rows

Source: https://modern-css.com/reference/properties/grid-row

Places the sidebar starting at row line 1 and spanning three rows down. Useful for tall content next to shorter stacked items.

```css
.sidebar {
  grid-row: 1 / span 3;
}
```

--------------------------------

### Quick example: font-palette values

Source: https://modern-css.com/reference/properties/font-palette

Shows basic usage of font-palette with 'dark' and 'emoji' values.

```css
.dark { font-palette: dark; }
.emoji { font-palette: emoji; }
```

--------------------------------

### CSS animation-timing-function example with ease-in-out

Source: https://modern-css.com/reference/properties/animation-timing-function

Defines the animation timing function for a .smooth-move element. The animation slides over 1 second infinitely, starting slow, speeding up in the middle, and slowing down at the end.

```css
.smooth-move {
  animation: slide 1s infinite;
  /* Starts slow, speeds up in the middle, then slows down at the end */
  animation-timing-function: ease-in-out;
}
```

--------------------------------

### Quick example of using percentages

Source: https://modern-css.com/reference/types/percentage

Shows a .child class using width: 50% and font-size: 120% to set dimensions relative to the parent.

```css
.child {
  /* Takes up exactly half the width of its parent */
  width: 50%;
  /* Sets the font size relative to the parent's font size */
  font-size: 120%;
}
```

--------------------------------

### Generated CSS for scroll snap configuration

Source: https://modern-css.com/tools/css-scroll-snap-generator

CSS generated by the tool based on the selected options. The example shows scroll-snap-type: x mandatory and scroll-snap-align: start, with a comment noting that scroll-snap-stop is normal by default.

```css
.scroller { scroll-snap-type: x mandatory; } .slide { scroll-snap-align: start; /* scroll-snap-stop: normal (default) */ }
```

--------------------------------

### Set inline borders with border-inline

Source: https://modern-css.com/reference/properties/border-inline

Use `border-inline` to set the width, style, and color for both the start and end borders in the inline dimension. This example sets a 4px solid black border on the left and right in LTR.

```css
.button-alt {
  /* Logical equivalent of setting both left and right borders */
  border-inline: 4px solid #000;
  padding: 0.5rem 1rem;
}
```

--------------------------------

### Fixed starting size with room to grow

Source: https://modern-css.com/reference/properties/flex-basis

Sets flex-basis to 240px and flex-grow to 1, so the card starts at 240px and grows if extra space is available. If space is insufficient, multiple cards can wrap.

```css
.card {
  flex-basis: 240px;
  flex-grow: 1;
}
```

--------------------------------

### Define a triangle with shape() in clip-path

Source: https://modern-css.com/reference/types/shape-function

Use the shape() function to define a triangle by moving to a start point, drawing lines to vertices, and closing the path. The example uses percentage coordinates relative to the element's box.

```css
.custom-bg {
  /* Defines a triangle using the shape() function */
  clip-path: shape(from 0 0, line to 100% 0, line to 50% 100%, close);
}
```

--------------------------------

### Quick example: p { text-align-all: center; }

Source: https://modern-css.com/reference/properties/text-align-all

Basic usage of text-align-all to center-align text in a paragraph element.

```css
p { text-align-all: center; }
```

--------------------------------

### Position a floating label with inset-inline-start

Source: https://modern-css.com/reference/properties/inset-inline-start

Use this CSS rule to position an absolutely positioned element at the start of the inline axis (left in LTR, right in RTL). The example sets inset-inline-start to 1rem and inset-block-start to -0.5rem, with a comment noting the logical behavior.

```css
.floating-label {
  position: absolute;
  /* Positions at the start of the line (left in English, right in Hebrew) */
  inset-inline-start: 1rem;
  inset-block-start: -0.5rem;
}
```

--------------------------------

### CSS example: box-decoration-break with clone value

Source: https://modern-css.com/reference/properties/box-decoration-break

Shows a span.highlight rule that applies a gradient background, padding, and border-radius, with box-decoration-break set to clone (including the -webkit- prefix) so every line fragment gets the background and padding. The default 'slice' behavior cuts borders/padding at line breaks.

```css
span.highlight {
  background: linear-gradient(to right, #7c3aed, #ec4899);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  /* standard 'slice' (default) cuts borders/padding at line breaks */
  /* 'clone' ensures every line fragment gets the background and padding */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
```
Tokens:
Raw