All Prompts
All Prompts
backgroundherogradientanimatedtailwindsvgdecorativecontainer
Diagonal Gradient Background with Moving Cube
Динамичный фон с диагональным градиентом и анимированным кубом. Идеален для hero-секций, баннеров и декоративных элементов в современных UI. Tailwind CSS, SVG.
Prompt
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Radio Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist">
.font-geist {
font-family: 'Geist', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-roboto" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-roboto">
.font-roboto {
font-family: 'Roboto', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-montserrat">
.font-montserrat {
font-family: 'Montserrat', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-poppins" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-poppins">
.font-poppins {
font-family: 'Poppins', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-playfair" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
<style id="all-fonts-style-font-playfair">
.font-playfair {
font-family: 'Playfair Display', serif !important;
}
</style>
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
<style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif {
font-family: 'Instrument Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
<style id="all-fonts-style-font-merriweather">
.font-merriweather {
font-family: 'Merriweather', serif !important;
}
</style>
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-bricolage">
.font-bricolage {
font-family: 'Bricolage Grotesque', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-jakarta">
.font-jakarta {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-manrope" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-manrope">
.font-manrope {
font-family: 'Manrope', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk {
font-family: 'Space Grotesk', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-work-sans">
.font-work-sans {
font-family: 'Work Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
<style id="all-fonts-style-font-pt-serif">
.font-pt-serif {
font-family: 'PT Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist-mono">
.font-geist-mono {
font-family: 'Geist Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
<style id="all-fonts-style-font-space-mono">
.font-space-mono {
font-family: 'Space Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-quicksand">
.font-quicksand {
font-family: 'Quicksand', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-nunito" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-nunito">
.font-nunito {
font-family: 'Nunito', sans-serif !important;
}
</style>
</head>
<body class="m-0 font-geist" style="margin: 0;">
<div class="flex fixed top-0 left-0 bg-gray-900 w-full h-screen mt-0 mr-0 mb-0 ml-0 items-center justify-center"
style="background: #181c21;">
<div class="overflow-hidden flex relative w-full h-full items-center justify-center"
style="background: repeating-linear-gradient(135deg, #232526 0px, #232526 60px, #23252699 70px, #414345 130px);">
<svg preserveAspectRatio="xMidYMid slice" height="100%" width="100%"
class="absolute z-10 animate-cube-move opacity-70 w-[100px] h-[100px]"
style="width: 100px; height: 100px; left: -30%; top: -20%; color: rgb(0, 0, 0);" viewBox="0 0 120 104"
stroke-width="2" data-icon-replaced="true">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="cube-dark">
<stop stop-color="#232526" offset="0%"></stop>
<stop stop-color="#414345" offset="100%"></stop>
</linearGradient>
<linearGradient y2="0%" x2="100%" y1="100%" x1="0%" id="cube-mid">
<stop stop-color="#4b6cb7" offset="0%"></stop>
<stop stop-color="#182848" offset="100%"></stop>
</linearGradient>
<linearGradient y2="100%" x2="0%" y1="0%" x1="100%" id="cube-light">
<stop stop-color="#a8edea" offset="0%"></stop>
<stop stop-color="#fed6e3" offset="100%"></stop>
</linearGradient>
</defs>
</svg>
<!-- Radio Component -->
</div>
</div>
<style>
.radio-container {
--main-color: #4f9eff;
--main-color-opacity: #4f9eff1c;
}
.radio-container .glider::before {
content: "";
position: absolute;
height: 60%;
width: 300%;
top: 50%;
transform: translateY(-50%);
background: var(--main-color);
filter: blur(10px);
}
.radio-container .glider::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 150px;
background: linear-gradient(90deg, var(--main-color-opacity) 0%, rgba(0, 0, 0, 0) 100%);
}
.radio-container input:checked+label {
color: #4f9eff;
}
.radio-container input:nth-of-type(1):checked~.glider-container .glider {
transform: translateY(0);
}
.radio-container input:nth-of-type(2):checked~.glider-container .glider {
transform: translateY(100%);
}
.radio-container input:nth-of-type(3):checked~.glider-container .glider {
transform: translateY(200%);
}
</style>
<script>
lucide.createIcons();
</script>
</body>
</html>