How to apply gradients to texts?

[aashishnandakumar-rocketium]

I want to get the following text gradients supported:

I have the following data available for the same:

"textFill": {
            "type": "linear",
            "coords": {
              "x1": 1,
              "y1": 0.5,
              "x2": 0,
              "y2": 0.5
            },
            "colorStops": [
              {
                "color": "rgba(207, 16, 1, 1)",
                "offset": 0
              },
              {
                "color": "rgba(147, 0, 0, 1)",
                "offset": 1
              }
            ],
            "offsetX": 0,
            "offsetY": 0,
            "gradientUnits": "percentage",
            "gradientTransform": null
},

How to achieve this?

[Agamnentzar]

In general when you want to achieve certain effect you should create that effect in Photoshop and then read the file and see what kind of properties you need to achieve that effect. Regarding updating text properties check out this section: https://github.com/Agamnentzar/ag-psd?tab=readme-ov-file#updating-text-layers Because you will need to re-open the file in Photoshop to update the text layer or you'll have to redraw the bitmap yourself before saving the file.

[aashishnandakumar-rocketium]

I did the same, but the data after reading the obtained psd is not showing/having any effects as asked Here is the data:

{
  top: 148,
  left: 233,
  bottom: 306,
  right: 847,
  blendMode: 'normal',
  opacity: 1,
  clipping: false,
  transparencyProtected: false,
  hidden: false,
  effectsOpen: true,
  name: 'Text Layer',
  effects: {
    dropShadow: [ [Object] ],
    innerShadow: [ [Object] ],
    outerGlow: {
      size: [Object],
      color: [Object],
      blendMode: 'screen',
      enabled: false,
      opacity: 0.34901960784313724
    },
    innerGlow: {
      size: [Object],
      color: [Object],
      blendMode: 'screen',
      enabled: false,
      opacity: 0.34901960784313724
    },
    bevel: {
      size: [Object],
      angle: 90,
      strength: 7,
      highlightBlendMode: 'screen',
      shadowBlendMode: 'multiply',
      highlightColor: [Object],
      shadowColor: [Object],
      style: 'inner bevel',
      highlightOpacity: 0.5019607843137255,
      shadowOpacity: 0.5019607843137255,
      enabled: false,
      useGlobalLight: true,
      direction: 'up'
    },
    solidFill: [ [Object] ]
  },
  text: {
    transform: [ 1, 0, -0, 1, 850.35, 216.40625 ],
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    text: 'All-in-one* care\nfor all dental problems!',
    index: 0,
    gridding: 'none',
    antiAlias: 'sharp',
    orientation: 'horizontal',
    warp: {
      style: 'none',
      value: 0,
      perspective: 0,
      perspectiveOther: 0,
      rotate: 'horizontal'
    },
    bounds: {
      top: [Object],
      left: [Object],
      right: [Object],
      bottom: [Object]
    },
    boundingBox: {
      top: [Object],
      left: [Object],
      right: [Object],
      bottom: [Object]
    },
    useFractionalGlyphWidths: true,
    superscriptSize: 0.583,
    superscriptPosition: 0.333,
    subscriptSize: 0.583,
    subscriptPosition: 0.333,
    smallCapSize: 0.7,
    shapeType: 'point',
    pointBase: [ 0, 0 ],
    paragraphStyle: {
      justification: 'right',
      firstLineIndent: 0,
      startIndent: 0,
      endIndent: 0,
      spaceBefore: 0,
      spaceAfter: 0,
      autoHyphenate: true,
      hyphenatedWordSize: 6,
      preHyphen: 2,
      postHyphen: 2,
      consecutiveHyphens: 8,
      zone: 36,
      wordSpacing: [Array],
      letterSpacing: [Array],
      glyphSpacing: [Array],
      autoLeading: 1.2,
      leadingType: 0,
      hanging: false,
      burasagari: false,
      kinsokuOrder: 0,
      everyLineComposer: false
    },
    style: {
      font: [Object],
      fauxBold: false,
      tracking: 0,
      autoKerning: true,
      kerning: 0,
      baselineShift: 0,
      underline: false,
      strikethrough: false,
      fillColor: [Object],
      strokeColor: [Object],
      fillFlag: true,
      strokeFlag: false,
      yUnderline: 1
    },
    styleRuns: [ [Object], [Object] ]
  },
  id: 4,
  blendClippendElements: true,
  blendInteriorElements: false,
  knockout: false,
  protected: { transparency: false, composite: false, position: false },
  layerColor: 'none',
  timestamp: 1739891439.615482,
  referencePoint: { x: 545, y: 81 },
  canvas: [Canvas 614x158]
}

here there is no presence of the linear gradient effect even though it is being applied in photoshop

[Agamnentzar]

Can you share PSD document with gradient applied to text. So I can verify how it's exported. I'm also not sure which technique you're using to apply the gradient, maybe some data is not read properly.

[quarksb]

I believe the core data of gradients to texts is in gradientOverlay, such as: