[iOS][SwiftUI] 徐々に薄くなるテキストの作成方法

題字・次男

2025.12.18

 はじめにスターバックスデジタルテクノロジー部のけいすけです。

↓こんなテキストを作る方法を紹介します。
 LinearGradient上記のようなテキストは LinearGradient を利用することで実現できます。
https://developer.apple.com/documentation/swiftui/lineargradient
LinearGradient は線形のグラデーションをサポートするための API であり、カラーと開始/終了位置を指定できます。

Syape Style として使う場合はクラスメソッドの linearGradient() が利用できます。
https://developer.apple.com/documentation/swiftui/shapestyle/lineargradient(_:startpoint:endpoint:)
赤・緑・青 を 左から右へ 指定した場合は以下のような見た目になります。
Text("あーるじーびー")
    .foregroundStyle(.linearGradient(
        colors: [.red, .green, .blue],
        startPoint: .leading,
        endPoint: .trailing
    ))
 薄くするコツポイントは以下 2 つです。
Text の foregroundStyle に LinearGradient を指定する
カラーに clear を使用する
テキストそのものを薄くしたいので、foregroundStyle を設定しましょう。

カラーに clear を使用することで、自然な流れで薄くなっていきます。
 サンプルコードText("左から右へ薄くなっていくぅ〜")
    .foregroundStyle(.linearGradient(
        colors: [.primary, .clear],
        startPoint: .leading,
        endPoint: .trailing
    ))
Text("上から下へ薄くなっていくぅ〜")
    .foregroundStyle(.linearGradient(
        colors: [.primary, .clear],
        startPoint: .top,
        endPoint: .bottom
    ))
Text("最後だけ薄くなっていくぅ〜")
    .foregroundStyle(.linearGradient(
        colors: [.primary, .primary, .primary, .primary, .clear],
        startPoint: .leading,
        endPoint: .trailing
    ))
 おわりにLinearGradient を利用することで線形のグラデーションを表現できます。

また、カラーに clear を指定することで色を薄くすることも可能です。

テキストを装飾したい時に試してみてはいかがでしょうか？
 リンクLinearGradient | Apple Documentation
linearGradient(_:startPoint:endPoint:) | Apple Documentation
 採用情報スターバックスデジタルテクノロジー部では iOS アプリエンジニアを募集しています。

一緒にスタバのアプリを作りませんか？
https://careers.classmethod.jp/requirements/sbj-nativeapp-ios/