Skip to the content
Surface

Lesson 21 of 21 · Layout and paint

Gradients and shadows

bg-linear-to-br paints a gradient to the bottom right. from- and to- give the colors of its two stops, and via- adds a stop in the middle. A variant can change one stop: hover:from-$accent-hover.A box has four shadow layers: shadow-, inset-shadow-, ring- and inset-ring-. Each layer has its own utility, so a ring does not remove the shadow.Your turn
  • Add bg-linear-to-br from-$accent to-$surface to the card.
  • Add shadow-lg to the card.
  • Add ring-1 ring-$border to the card. The card keeps its shadow.
More: gradients and shadow layers.
Back
Preview
1 error
The sandbox needs a browser.