Effects: gradients, shadows and borders

From flat to polished

Here's the finishing touch. With three families of properties the design goes from "correct" to "refined": gradients, shadows and rounded corners. They're cheap to write and hard to fake by eye: exactly what gives that finished- product feel.

Gradients

A gradient is an image generated by CSS, so it goes in background (or background-image), not in color.

.linear {
  background: linear-gradient(to right, #6366f1, #ec4899);
}
.diagonal {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee, #a7f3d0);
}
.radial {
  background: radial-gradient(circle, #fde047, #f97316);
}

• linear-gradient(direction, color1, color2, …): gradient in a straight line. The direction can be to right, to bottom, or an angle (135deg).
• radial-gradient(shape, …): radiates from the center outward.
• You can chain many color stops.

Shadows

box-shadow casts a shadow from the box; text-shadow, from the text. The basic syntax is offsetX offsetY blur color.

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.title {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.sunken {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);  /* inner shadow */
}

• The first two values move the shadow (positive = right/down).
• The third (blur) softens it; the larger, the smoother.
• inset puts it inside the box.

Rounded corners

.button {
  border-radius: 8px;     /* soft corners */
}
.avatar {
  border-radius: 50%;     /* perfect circle (in a square box) */
}
.pill {
  border-radius: 999px;   /* fully rounded ends */
}

Combining the three effects you get cards, buttons and badges with a modern look without a single image. A soft shadow, a rounded corner, and a brand gradient: that's the difference between a landing that looks like a template and one that looks like yours.

Examples

A card with gradient, shadow and soft corners

.card {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 24px;
}