Background Gradient Colors

Apply gradient backgrounds with linear, radial and other patterns.

Usage:

@bg gradient-*;
@bg gradient-linear-*;
@bg gradient-radial-*;
@bg gradient-conic-*;

danger

Gradient color uses background-image property.

So, if you are using @bg img-*; then conflict will be created. You need to choose a stratagey to work with both.

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		bg: {
			gradient: {
				DEFAULT: {
					property: "background-image: <v><i>;",
					values: {},
				},

				linear: {
					property: "background-image: linear-gradient(<v>)<i>;",
					values: {},
				},

				radial: {
					property: "background-image: radial-gradient(<v>)<i>;",
					values: {},
				},

				conic: {
					property: "background-image: conic-gradient(<v>)<i>;",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;

color img