cssでグラデーションが出来ない

実現したいこと

cssで背景でグラデーションをつけたいのですが,上手くいきません。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>hoge </title>
5        <meta charset="UTF-8">
6        <link rel="stylesheet" href="実験.css">
7    </head>
8    
9    <body>
10        <div>
11            <p>hoge</p>
12        </div>
13    </body>
14</html>

css
1div{
2    background-color: linear-gradient(#000, #0ff);
3    border : 3px solid #000;
4    border-radius: 500px;
5    height: 294px;
6    width: 294px;
7    line-height: 300px;
8    overflow: hidden;
9    text-align: center;
10}
11

実行環境

mac bookのchromeで実行しています

OneFrogInAWell

2022/08/08 08:46

書き忘れていましたが,グラデーション以外のcssは問題なく反映されました。

yambejp

2022/08/08 08:55

何色から何色へのグラデーションをどんな感じでつけたいのでしょうか？

行動規範の内容に同意します

回答3件

ベストアンサー

background-colorをbackgroundとしてみてください

投稿2022/08/08 08:51

退会済みユーザー

総合スコア0

OneFrogInAWell

2022/08/08 08:55

出来ました!ありがとうございました!

退会済みユーザー

2022/08/08 08:56

https://memo.itsysgroup.com/?p=925 ↑の記事のようにbackgroundとbackground-colorの違いなど見てみると良いかと思います！

行動規範の内容に同意します

linear-gradient が作るのは画像であって色ではないです。

二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。
linear-gradient() - CSS: カスケーディングスタイルシート | MDN

投稿2022/08/08 08:56

Lhankor_Mhy

総合スコア36074

css
1<style>
2div{
3    border : 3px solid #000;
4    border-radius: 500px;
5    height: 294px;
6    width: 294px;
7    line-height: 300px;
8    overflow: hidden;
9    text-align: center;
10    background-image: linear-gradient(var(--deg),var(--start),var(--end));
11}
12#hoge{
13  --deg:0deg;
14  --start:red;
15  --end:yellow;
16}
17#fuga{
18--deg:90deg;
19  --start:white;
20  --end:black;
21}
22</style>
23<div id="hoge">
24<p>hoge</p>
25</div>
26<div id="fuga">
27<p>fuga</p>
28</div>