styles.css 965 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. body {
  2. background: #333;
  3. }
  4. .box {
  5. --size: 500px;
  6. width: var(--size);
  7. height: var(--size);
  8. margin: 1em auto 0;
  9. border-radius: 50%;
  10. background:
  11. /* Circulo oscuro pequeño */
  12. radial-gradient(
  13. 10% 10% at 50% 25%,
  14. black 50%,
  15. transparent 50%
  16. ),
  17. /* Circulo oscuro grande */
  18. radial-gradient(
  19. 50% 50% at 50% 25%,
  20. white 50%,
  21. transparent 50%
  22. ),
  23. /* Circulo blanco pequeño */
  24. radial-gradient(
  25. 10% 10% at 50% 75%,
  26. white 50%,
  27. transparent 50%
  28. ),
  29. /* Circulo blanco grande */
  30. radial-gradient(
  31. 50% 50% at 50% 75%,
  32. black 50%,
  33. transparent 50%
  34. ),
  35. /* División de blanco y oscuro del circulo principal */
  36. linear-gradient(
  37. to right,
  38. white 50%,
  39. black 50%
  40. );
  41. }