CSS Effects & Polish Reference Card

Rounded corners & shadow

01

border-radius rounds corners; box-shadow lifts an element off the page a little.

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

02

Pair transition with :hover so a change responds smoothly instead of snapping.

.card {
  transition: 0.2s ease;
}
.card:hover {
  background-color: #61afee;
}

03

A two-color background as an alternative to a flat color. The angle (135deg) sets the direction.

.hero {
  background:
    linear-gradient(
      135deg,
      #2657a6,
      #7fa8ef
    );
}

04

These sit on top of the fundamentals — box model, selectors, inheritance. Combine two or three with intention, not all of them on one element.

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: 0.2s ease;
}

05

Use one or two effects with intention — stacking all of them on everything reads as noisy, not designed.
Check text contrast again after adding a gradient or a translucent overlay behind it.
Some visitors prefer reduced motion — heavy transitions and animation aren't free for everyone.

No unitsborder-radius: 8 is invalid — needs 8px.

Transition on nothingtransition alone does nothing — it needs a property to actually change, like on :hover.

Low-contrast gradientA gradient behind light text can silently fail contrast at one end even if it passes at the other.