5 CSS tricks that will change your frontend in 2025

CSS continues to surprise: now you can make pop-ups, animations, and adaptive forms without a JavaScript line. Below is a selection of the coolest CSS features of 2025 that are worth adopting.

💬 1. Popover API: pop-up elements without JS

Now you can create modal windows, tooltips, and drop-down lists only with HTML and CSS!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

When you click on the button, a pop-up appears. You can close it by pressing Escape or clicking outside the window.

To add a smooth animation:

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style — smooth appearance of elements

Usually, when an element appears, CSS immediately applies the final style. The animation is sharp. The new @starting-style allows you to set initial state, which will then smoothly transition into the final one.

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 The element starts a little higher and becomes transparent, then smoothly moves down and appears.

📏 3. Size animation with keywords

CSS now knows how to smoothly animate the transition between height: 0 and height: auto, as well as min-content, max-content, fit-content.

To do this, you need to allow the use of keywords:

:root {
  interpolate-size: allow-keywords;
}

Example:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

Previously, there was no such animation at all. Now it's a smooth opening.

📝 4. Adaptive input and textarea with field-sizing

Finally, CSS has learned automatically adjust the size of input, textarea and select for the content. Just add:

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

Example:

<textarea placeholder="Write as much as you want..."></textarea>
<input type="text" placeholder="Name">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

This form looks neat and adapts to the user without JS. 💡

🌗 5. The light-dark() function for dark and light themes

No more need to build @media (prefers-color-scheme) — now everything can be done in one line with light-dark() function:

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡 The colors will automatically adjust to the user's system theme.

CSS 2025 shows that every year we can do more and more beautifully without a single line of JavaScript. Try new features, and your code will become not only simpler, but also more modern ✨