Sombra interior en SF Symbols: el efecto que desconocías para tus iconos en SwiftUI

🎨 SwiftUI ofrece docenas de APIs para personalizar iconos con SF Symbols, pero existe una técnica poco conocida que transforma radicalmente la apariencia de tus símbolos: las sombras interiores aplicadas directamente al estilo de primer plano.

💎 Esta técnica permite crear iconos que parecen tallados o hundidos en su fondo, generando un efecto de profundidad inversa. En lugar de que el símbolo sobresalga de la superficie, aparece como si estuviera recortado dentro de ella.

Image(systemName: "home")
    .symbolVariant(.circle)
    .foregroundStyle(
        .yellow
            .shadow(.inner(radius: 2))
    )

🔧 La clave está en combinar el modificador .foregroundStyle() con .shadow(.inner()) sobre cualquier ShapeStyle, incluyendo colores y gradientes. Esto fue introducido en iOS 16 como parte de la nueva API ShadowStyle que unificó las sombras en SwiftUI.

⚙️ Puedes ajustar tanto el radio de desenfoque como el color de la sombra para controlar la intensidad del efecto. Radios pequeños (1-3 puntos) crean efectos sutiles y elegantes, mientras que valores mayores generan profundidades más pronunciadas.

🎯 Las variantes circulares o redondeadas de símbolos funcionan especialmente bien con esta técnica. El modificador .symbolVariant(.circle), .symbolVariant(.square) o .symbolVariant(.rectangle) envuelven el icono en formas geométricas perfectas para este efecto.

✨ También puedes combinar sombras interiores con gradientes para crear efectos visuales aún más sofisticados. El gradiente base proporciona profundidad de color mientras que la sombra interior añade dimensión tridimensional.

Image(systemName: "star")
    .symbolVariant(.circle.fill)
    .foregroundStyle(
        .orange.gradient
            .shadow(.inner(radius: 3))
    )

📐 A diferencia del modificador .shadow() tradicional que aplica sombras alrededor de las vistas, las sombras interiores mediante ShadowStyle afectan únicamente al relleno del símbolo, permitiendo un control más preciso sobre la apariencia final.

🔄 Esta técnica se integra perfectamente con los cuatro modos de renderizado de SF Symbols: monocromo, jerárquico, multicolor y paleta. Puedes aplicar sombras interiores independientemente del modo de renderizado elegido para tu símbolo.

🎨 Las sombras interiores son especialmente útiles cuando diseñas interfaces con apariencia neumórfica o cuando quieres crear botones que aparenten estar pulsados, dando feedback visual inmediato al usuario sin necesidad de animaciones complejas.

👨‍💻 Dominar técnicas poco conocidas como esta te permite crear interfaces diferenciadas y pulidas sin recurrir a assets externos. SwiftUI ya tiene las herramientas, solo necesitas conocerlas. ¿Ya estás aplicando sombras interiores en tus proyectos?