Multi Color Gradient Fill

FYI, this is now supported natively in Framer.

Lines 9 through 13 of the code will allow you to easily make any adjustments you'd like to the angle or colors.

Code Preview

import React from "react"
import type { ComponentType } from "react"
import { motion } from "framer-motion"

export function withSoftRainbowGradientFill(Component): ComponentType {
    return (props) => {
        const gradient = `
      linear-gradient(
        135deg,
        #FFB8A4 0%,
        #FAD89E 33%,
        #B5E6C5 66%,
        #A5C6FF 100%
      )
    `

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    background: gradient,
                }}
            />
        )
    }
}

Countdown

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.