CSS Linear Gradient Angle keywords to degree conversion

Viewed 159

I want to convert linear-gradient keywords like to right & to bottom into 90deg & 180deg.

I have only managed to find out 4 keywords values to degrees:

const orientationToAngle = new Map<string, string>([
    ['to top', '0deg'],
    ['to right', '90deg'],
    ['to bottom', '180deg'],
    ['to left', '270deg'],
])

This is a part of a function that takes in colors, positions, orientation, and angle and returns a linear-gradient:

export const colorsToLinearGradient = (
    colors: string[],
    positions: number[],
    orientation?: string,
    angle?: string
) => {
    const stopStrings = colors.map((color, i) => {
        if (i === 0) return `${color} 0%`
        if (i === colors.length - 1) return `${color} 100%`
        return `${color} ${positions[i]}%`
    })

    const orientationToAngle = new Map<string, string>([
        ['to top', '0deg'],
        ['to right', '90deg'],
        ['to bottom', '180deg'],
        ['to left', '270deg'],
    ])

    const angleValue = angle || orientationToAngle.get(orientation || 'to bottom')
    return `linear-gradient(${angleValue}, ${stopStrings.join(', ')})`
}

I need to figure out how to add in the rest of the values like: to top right, to top left, to bottom right, to bottom left? I don't know if I'm missing any other keywords.

So would love to know the angle equivalents of such keywords?

0 Answers
Related