MonorailCss

Background Image

Utilities for controlling the starting color of gradient color stops.

Class CSS Output
from-red-500 
--tw-gradient-from: var(--color-red-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
from-blue-600 
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
from-green-400 
--tw-gradient-from: var(--color-green-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
from-purple-500/50 
--tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
from-[#ff0000] 
--tw-gradient-from: #ff0000;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
to-blue-500 
--tw-gradient-to: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
to-purple-600 
--tw-gradient-to: var(--color-purple-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
to-pink-400 
--tw-gradient-to: var(--color-pink-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
to-cyan-500/50 
--tw-gradient-to: color-mix(in oklab, var(--color-cyan-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
to-[#0000ff] 
--tw-gradient-to: #0000ff;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));
}
via-purple-500 
--tw-gradient-via: var(--color-purple-500);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
via-pink-600 
--tw-gradient-via: var(--color-pink-600);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
via-indigo-400 
--tw-gradient-via: var(--color-indigo-400);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
via-yellow-500/50 
--tw-gradient-via: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
via-[#ff00ff] 
--tw-gradient-via: #ff00ff;
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}

from-red-500

--tw-gradient-from: var(--color-red-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

from-blue-600

--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

from-green-400

--tw-gradient-from: var(--color-green-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

from-purple-500/50

--tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

from-[#ff0000]

--tw-gradient-from: #ff0000;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

to-blue-500

--tw-gradient-to: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

to-purple-600

--tw-gradient-to: var(--color-purple-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

to-pink-400

--tw-gradient-to: var(--color-pink-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

to-cyan-500/50

--tw-gradient-to: color-mix(in oklab, var(--color-cyan-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

to-[#0000ff]

--tw-gradient-to: #0000ff;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position));

via-purple-500

--tw-gradient-via: var(--color-purple-500);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);

via-pink-600

--tw-gradient-via: var(--color-pink-600);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);

via-indigo-400

--tw-gradient-via: var(--color-indigo-400);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);

via-yellow-500/50

--tw-gradient-via: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);

via-[#ff00ff]

--tw-gradient-via: #ff00ff;
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from, transparent) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);