Horizon5

Tags: gradient, color, fade, mask

Usage

Before you begin, make sure that you've installed Ombré in your project. Then use the <OmbreHorizon5 /> component like so:

Vue

<script setup>
  import { OmbreHorizon5 } from '@ombre-ui/vue'
</script>

<template>
  <div class="relative h-screen w-screen">
    <OmbreHorizon5 />
  </div>
</template>

React

import { OmbreHorizon5 } from '@ombre-ui/react'

function MyComponent() {
    return (
        <div className="relative h-screen w-screen">
            <OmbreHorizon5 />
        </div>
    )
}

Svelte

<script>
  import { OmbreHorizon5 } from '@ombre-ui/svelte'
</script>

<div class="relative h-screen w-screen">
    <OmbreHorizon5 />
</div>

Props

You can configure OmbreHorizon5 by passing the following props:

Name	Type	Default	Description
color1	String	#42a3d8	The first color of the horizon gradient.
color2	String	#5500ff	The second color of the horizon gradient.
color3	String	#ff05d5	The third color of the horizon gradient.
color4	String	#6b1ebf	The fourth color of the horizon gradient.
backgroundColor	String	#0b1229	The background color.

Deploying to Production

You must have a valid Ombré license before you deploy to production. You can purchase a lifetime license for unlimited personal & commercial projects for only $36.