Nudge

Nudge an element towards the center

nudge moves the element towards the center of its container with the margin property.

<div class="card">
  <div class="nudge [--nudge:0.5rem]"> Nudged element </div>
</div>
<!-- ... other positions ... -->

Combine nudge with other positioning utilities

nudge is incredible when you combine it with pos or fixed.

Imagine you want an element to be positioned on the top right corner, and perhaps nudged a little bit to the center — you can do that with nudge without diving into the nitty gritty CSS details.

<div class="stack">
  <div class="pos-topright nudge-2"> Nudged element </div>
  <!-- ... other positions ... -->
</div>

Perfect inner border radius calulation

While nudging, you can enable automatic inner radius calculation to calculate the perfect border radius, every time!

Make interesting cards with nudge

Have you seen cards with backgrounds contained in a slight nudge? Well, you can do that easily too with nudge and the inner border radius option!